CSS主要知識点まとめ---セレクタ

3537 ワード

CSSでは、セレクタはスタイルを追加する要素を選択するモードです.
1)基本セレクタ
  • 汎用セレクタ:*margin:0;padding:0;など、すべての要素に適用されます.
  • ラベルセレクタ:このラベルを使用するすべての要素に一致します.たとえば、p{font-size:1 px}
  • などです.
  • idセレクタ:すべてのid属性が現在の名前に等しい要素をマッチングします.たとえば、#info{background:#ff 0;}
  • classセレクタ:現在の名前を含むすべてのclassプロパティの要素を一致させます.たとえば、次のようにします.iinfo { background:#ff0; }

  • 2)コンビネーションセレクタ
  • 複合セレクタ:2つ以上のセレクタを組み合わせて、1つまたは複数のラベルをより正確に設定します.
    
      
    
    
        

    hello

    world

  • 子孫セレクタ:ネストされた階層にかかわらず、親セレクタが存在するラベルパッケージ内で設定可能である限り、親セレクタと子孫セレクタの間に
  • をスペースで分割する.
        
         
        
        
            
    • 1
    • 2
    1. 3
    2. 4
  • 子セレクタ:親ラベルに最も近い世代のラベルを制御し、より深いネストされたラベルを制御できません.>で示す
        
          
        
        
            

    1

    • 1

  • マルチエレメントセレクタ:すべてのEエレメントまたはFエレメントを同時に一致させ、EとFの間をカンマで区切る
        
          
        
        
            

    1

    2

    3

    4

  • 3、属性選択器
  • は、あるクラスのラベルに特定の属性(id、class、nameなど)を有するラベルの設定スタイルを[]で表し、css 3にファジイマッチング
  • を付加する.
        
          
          
          
          
        
        
            

    し1

    タイトル2


    4、ダミークラス:同じラベルで、その状態によって、スタイルが異なります.これを「偽類」と呼ぶ.擬似クラスはコロンで表される.
    例えばdivがboxクラスに属していることは明らかで、boxクラスに属している.しかしaはどんな種類に属しますか?不明確.ユーザーがクリックする前にどのような状態であるか、クリックした後にどのような状態であるかを見る必要があるからです.だから、「偽類」と呼ばれています.
    擬似クラスセレクタは2つに分けられます.
    (1)静的擬似クラス:ハイパーリンクのスタイルにのみ使用できます.次のようになります.
  • :linkハイパーリンククリック前
  • :visitedリンクがアクセスされた後
  • .
    PS:以上の2つのスタイルは、ハイパーリンクにのみ使用できます.
    (2)動的擬似クラス:すべてのラベルに適用されるスタイル.次のようになります.
  • :hover「サスペンション」:マウスをラベルに乗せたとき
  • :active「アクティブ」:マウスでラベルをクリックしますが、手を離さない場合.
  • :focusは、あるラベルがフォーカスを取得するときのスタイル(例えば、ある入力ボックスがフォーカスを取得する)
  • である.
    PS:以上の3つのスタイルは、ハイパーリンクにのみ使用できます.
    /*           */
            a:link{
                color:red;
            }
    
            /*           */
            a:visited{
                color:orange;
            }
            /*    ,        */
            a:hover{
                color:green;
            }
            /*      ,        */
            a:active{
                color:black;
    }

    参考ブログ:
    https://www.jianshu.com/p/f56240e64f1b
    https://www.cnblogs.com/1463069300limingzhi/p/11361718.html
    https://www.cnblogs.com/1463069300limingzhi/p/11361709.html