CSSセレクタの特殊性と重要性

とくしゅせい
CSSコードを作成するとき、同じ要素に複数のスタイルルールが作用する場合があります.たとえば、

<!-- HTML -->

<header>

  <nav class="nav-main" id="navigation">Here background</nav>

</header>



/* CSS */

header nav {

  background-color: red;

}

#navigation {
  background-color: green;
}



.nav-main {

  background-color: blue;

}

以上の3つのスタイルルールは、ID値が「navigation」のnavラベルに作用し、最終的にどのスタイルルールが有効になるのかは、セレクタの特殊性(または優先度)の高さによって異なり、セレクタの特殊性の高いスタイルは特殊性の低いスタイルをカバーし、テストnavラベルの背景はgreen緑色に表示されます.
セレクタの特殊性はどのように計算されますか?
通常、カンマで区切られた4つの数字を使用して、次のような特殊性を表します.

各要素または擬似要素セレクタ寄与の特殊性は0,0,0,1

である.

各クラス、擬似クラスまたは属性セレクタの特殊性は0,0,1,0

である.

各IDセレクタの特殊性は0,1,0,0

である.

結合子とワイルドカードの特殊性に寄与しない

コンビネーションセレクタの特殊性を計算するときは、まず各種セレクタの数と対応する特殊性を計算してから加算します.例えば、
 

div ul li              /* 0,0,0,3    3       */



div.aside ol li        /* 0,0,1,3    1     ，3       */



a:hover                /* 0,0,1,1    1      ，1       */



div.navlinks a:hover   /* 0,0,2,2    1     ，1      ，2       */



.affix.top             /* 0,0,2,0            */



input[type="text"]     /* 0,0,1,1 1      ，1       */ input[name="sex"][type="radio"]
 /* 0,0,2,1 2      ，1       */ #title em /* 0,1,0,1 1  ID    ，1       */ h1#title em /* 0,1,0,2 1  ID    ，2       */ * /* 0,0,0,0 1       */

注意:複数クラスセレクタのクラス数を計算すると、複数クラスセレクタがサポートされていないIE 6はクラスとして理解されます.
セレクタの特殊性の高低を比較して左から右に順番に比較すると、数字が大きい方が優先度が高くなり、同じ場合は次を比較し、すべてのビットが同じであれば優先度が高くなり、セレクタの優先度が同じであれば後に示すスタイルが前に示すスタイルを上書きします
各レベルの優先度値は互いに独立しており、13要素セレクタが1つのクラスセレクタよりも多く書かれていても特殊性は高くありません.
1つ目の0は、行のスタイルに使用され、行のスタイルにのみ使用されます.

<nav style="background-color: gray;"></nav> <!-- 1,0,0,0 -->

 
重要度
特殊性を無視できるものがあります.それは!important.使用!importantは、任意のスタイルルールを重要とマークできます.

.nav-main {

  background-color: blue !important;

  color: #666;

}

基本的には、重要なスタイルルールは、重要とマークされていないスタイルルールを上書きすることができます.

<div id="gohome"><a href="/" id="home">Home</a></div>

div#gohome a#home {

  color: red;

}



div a {

  color: green !important;

}

上のコードは緑のgreenのリンクを得て、最初のルールは非常に高い特殊性(0,2,0,2)を持っています.
でもいます!importantの前では同じように役に立たない.最初のルールにも重要とマークしない限り.

div#gohome a#home {

  color: red !important;

}



div a {

  color: green !important;

}

このときリンクが赤色redとなり,いずれも重要とマークされている場合,前述の特殊性ルールを用いて解決する.
だから使います!importantの場合は、できるだけ使わないでください.
また、IE 6はサポートです!importantは、完全にサポートされていないだけで、同じセレクタで重要なスタイルルールとしてマークされた後、このスタイルルールを再定義します.importantは無効になります

.header {

  color: red !important;     /*       red */

  color: green;              /* IE6 green !important    */

}

あとはIE 6/7でOK!importantの後ろに文字を追加しても認識できます

.header {

  color: red !important ie;     /* ie6/7 red */

}