kaya0604’s blog

Webデザイナーの備忘録...

CSSの詳細度について復習

詳細度とは

どのプロパティ値が最もある要素に関係があり、適用されるかをブラウザが決定する手段です。

詳細度 - CSS | MDN

 簡単に言うと、スタイルが重複してしまった時、どのスタイルを適用させるか点数で評価し優先度を決めています。

 

詳細度の順番

以下は詳細度の高いものから順に並べたものです。

1、インラインスタイル 1,0,0,0

2、IDセレクタ 0,1,0,0

3、擬似クラス 0,1,0,0

4、属性セレクタ 0,0,1,0

5、クラスセレクタ 0,0,1,0

6、タイプセレクタ 0,0,0,1

7、全称セレクタ 0,0,0,0

例外

!inportant

!inportantは、詳細度とは無関係。

他のCSS内で作られた全ての宣言を無視して、上書きされます。

:not

:notは否定擬似クラスとは見なされません。

通常のセレクタで計算されます。