詳細度 (Specificity) / スタイルの優先順位
ある要素の同一の属性に異なる値が指定されたときに、どのスタイルが適用されるかを決定するのが詳細度です。
詳細度を大きい順に並べると、以下のようになります。
- インラインスタイル (Inline style) … (例 <p style="">)
- IDセレクタ (ID selectors) … (例 #foo)
- 擬似クラス (Pseudo-classes) … (例 :link、:hover)
- 属性セレクタ (Attributes selectors) … (例 a[href^="#"])
- クラスセレクタ (Class selectors) … (例 .bar)
- タイプセレクタ (Type selectors) … (例 p{...}、h1{...})
- 全称セレクタ (Universal selectors) … (例 *{...})
つまり特定の要素への関連性が強いものほど、詳細度が大きくなります。
!important規則
!important規則は、詳細度の規則に例外を認めます。
!importantは詳細度の規則を乱すため、使用する必要性があるならば先に詳細度の順位を上げる方法を検討します。
!importantの上書き
css - How to override !important? - Stack Overflow