CSSの詳細度について復習

詳細度とは

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

詳細度 - CSS | MDN

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

詳細度の順番

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

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

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

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

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

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

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

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

例外

!inportant

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

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

:not

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

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