CSSの詳細度の値について

CSSの詳細度は４つの値(0, 0, 0, 0)で計算され、左の値が高いほど詳細度が高くなっていきます。

一番右の列

要素セレクタ、擬似要素は一番右の列で計算される

詳細度(0, 0, 0, 1)の例

 p{~}
 p:after{~}

詳細度(0, 0, 0, 2)の例

div p{~}

右から2番目の列

クラスセレクタ、属性セレクタ、擬似クラスは右から2列目で計算される

詳細度(0, 0, 1, 0)の例

 .text{~}
 [class]{~}

細度(0, 0, 1, 1)の例

 a[target="_blank"]{~} //要素セレクタと属性セレクタ
 .class p{~}

細度(0, 0, 2, 0)の例

 .class .text{~}

右から3番目の列

idセレクタは右から3列名で計算される

 #id{~}

右から4番目の列

 <p style="color: #000;">テキスト</p>

順序によるソート(カスケーディング)

詳細度の同じルールが複数ある場合、後から出てきた方のルールが適用される。

!important
CSSの値に「!important」が指定されたスタイルは詳細度関係無しに最も優先して適用される。