詳細度 (Specificity)

ある要素の同一の属性に異なる値が指定されたときに、どのスタイルが適用されるかを決定するのが詳細度です。

詳細度の順位

詳細度を大きい順に並べると、以下のようになります。

  1. インラインスタイル (Inline style) … (例 <p style="">)
  2. IDセレクタ (ID selectors) … (例 #foo)
  3. 疑似クラス (Pseudo-classes) … (例 :link、:hover)
  4. 属性セレクタ (Attributes selectors) … (例 a[href^="#"])
  5. クラスセレクタ (Class selectors) … (例 .bar)
  6. タイプセレクタ (Type selectors) … (例 p{...}、h1{...})
  7. 全称セレクタ (Universal selectors) … (例 *{...})

つまり特定の要素への関連性が強いものほど、詳細度が大きくなります。

!important規則

!important規則は、詳細度の規則に例外を認めます。

!importantは詳細度の規則を乱すため、その必要性を感じた場合にはまず詳細度の順位を上げる方法を検討すべきです。

!importantの上書き

css - How to override !important? - Stack Overflow