Cssセレクタid classタググループ後代通用疑似類セレクタ詳細紹介

個人ブログ http://www.sharedblog.cn/?post=107
1.idセレクタ
    構文:
 

    >
        #id {
	          :   ;
        }

    eg:
 

    
        #box{
        	color: red;
        }

     注:①idセレクタの優先度が一番高く、id名が唯一で、同名のidが出現できません.          
           ②id名の命名は語義化され、一般的な命名方法としては、ラクダピーク命名法(芫subNavTitle)、下線接続命名法(manuuleftucon)があります.
 
2.クラスセレクタ(クラスセレクタ)
    構文:
 

  >
        .class {
                  :   ；
        }

    eg:
 

 .box{
                color:red;
        }

    注:類名詞リストを使ってスタイルを設定することもできます.使い方は以下の通りです.
 

      >
        .c1{
                font-size: 12px;
                color: red;
        }
        .c2{
                text-decoration: none;
        }

    ある要素が一部のスタイルと他の要素と同じである場合は、個々のスタイルと他の要素が異なる場合は、クラス名詞のリストを使用することができます.
 
3.タグ選択器(タイプ選択子/要素選択子)
    構文:
 

          {
           :   ;
      }

    eg:
 

        a{
                text-decoration:none;
        }
        body{
                font-family:"    ",Arial;
        }

    注:①要素のデフォルトのスタイルを変更したい場合は、タイプ選択子が使用できます.
          ②ドキュメント内の要素の表示効果を統一する場合には、種類選択子を使用することができます.
 
4.グループセレクタ
    構文:
 

           1,   2,  3,{
                  :   ;
        }

    eg:
 

        ul,ol{
                list-style:none;
        }
        .news, .intro, .job{
                float: left;
        }

    注:htmlの複数のタグ要素に同じスタイルを設定したい場合は、グループセレクタを使用することができます.
 
5.末裔セレクタ
    構文:
 

           1     2{
                  :   ;
        }

    eg:
 

        .box a{
                color: black;
        }

    注:選択子1と選択子2は、含まれる関係を含む必要があります.
 
6.汎用セレクタ(ワイルドカード)
    構文:
 

        *{
                  :   ;
        }

    eg:
 

        *{
                margin:0;
                padding:0;
        }

    注:*マッチ)ルート要素のすべてのラベル要素
 
7.ダミーセレクタ
    構文:
 

           :hover{
                  :   ;
        }

    ハイパーリンクの4つの状態:
        a:linkリンクは訪問された後の状態ではありません.
        a:visitedリンクが訪問された後の状態
        a:hoverマウスが滑った時の状態
        a:activeマウスを押した時の状態
    使用しやすいように、aの四つの状態を簡単に書きます.
 

        a {
                color: black;
        }
        a:hover {
                color: red;
        }

個人ブログ  http://www.sharedblog.cn/?post=107