CSSが適用されない原因になり得る「詳細度」についてまとめました。

詳細度とは

CSSの詳細度とは、同じ要素に複数のセレクタでスタイルが指定されている場合、どのスタイルを適用するのかを決定する優先順位のようなものです。

詳細度の計算方法

セレクタは詳細度の点数を持っており、下記のようなルールで採点します。

セレクタの種類	点数
IDセレクタ	1.0.0
クラスセレクタ、属性セレクタ、擬似クラス	0.1.0
要素セレクタ、擬似要素	0.0.1
ユニバーサルセレクタ	0

 

点数の合計値が大きいほど、詳細度が高くなります。

セレクタの詳細度とは別の優先度

セレクタの詳細度とは別の仕様で、以下の2つがあります。
いずれも、多用するとサイトのメンテナンス性を損なうことになる為、極力使わないことが望ましいです。

!important

他のプロパティを強制的に上書きするため、優先度が最も高くなります。
本来の優先順位を強制的に変えてしまう手法です。

インラインスタイル

HTMLタグにstyle属性を指定して直接スタイルを適用する方法です。
インラインスタイルは、常に外部スタイルシートの中のスタイルを上書きします。
!importantの次に優先度が高くなります。