WordPress+有料テーマで構築されたブログのカスタマイズをしていたら、どうしても反映されないスタイルがあったの調べたら、こうゆうことだった。
セレクタをより詳しく指定した方が優先される
実際のコードで解説する。
HTML
<div class="aaa">
<p class="bbb"><a href="">あああ</a></p>
</div>
CSS
div.aaa p.bbb a {
color: red;
}
a {
color: blue;
}
上記の感じだと、後ろに書いてある color:blue が適用されそうだが、実際はリンクの文字は赤になってしまう。
CSS優先順のまとめ
優先順位を優先度の高い方から並べてみた。
- !important が最強
- セレクタをより詳しく記述する
- idセレクタ(例:#myprofile{color:red;})
- classセレクタ(例:.kijititle{color:blue;})
- タイプセレクタ(例:p{color:yellow;})
- 全称セレクタ (例:*{color:pink})
- 寄りHTML要素に近い