CSSが当てられる優先順位について知っておきたい3つのこと

「文法は間違っていないのに、書いたCSSがきちんと反映されないッッ」
ということはCSS使いにはよくあると思う。

なんだか永遠の課題のような感じがするけども、たぶんそうでもない。よ。
3つのルールを知っておけば、CSSについてはOKさ。

• 数を比較してより多いほうが優先順位が高く、比べっこが決まれば他は比較しない
• 比べる順番は idの数→classの数→要素の数→書かれた順序
• セレクタはソースコードではなく開発者ツールから見るべし

もう本当にこれだけ覚えてればいいっす。
たとえば、下のようなCSSをみてみよう。

数を比較してより多いほうが優先順位が高く、比べっこが決まれば他は比較しない

比べる順番は idの数→classの数→要素の数→書かれた順序

div ul.hoge li.hoge p.hoge { /* 1 */
  color: black;
}

div ul.hoge li.hoge p.hoge { /* 2 */
  color: red;
}

p { /* 3 */
  color: blue;
}

div#hoge p { /* 4 */
  color: green;
}

こんなCSSがあったとき、あてられるCSSの優先順位はどういうふうになっているだろうか。

4 > 2 > 3である。(1は無視される)

上のcssを比べてみると、

styleの数	idの数	classの数	要素の数	書かれた順番
0	0	3	4	1
0	0	3	4	2
0	0	0	1	3
0	1	0	2	4

となっていますね。

表でいうと、左から1つ1つみて数を比較しているわけですね。
1と2を比較すると、id class 要素 全て数は一緒ですが、書かれた順番は2のほうが後なので、1より2のほうが優先されます。
(というか1が日の目を見ることはありません)

で、2と3ですが、idの数はどちらも0です。なのでclassを比較します。
classの数は2が3つなのに対し3は0です。classの数は2のほうが多いので、2のCSSが優先されます。
一度優先順位が決まると、要素の数もCSSの書かれた順番も一切考慮されません。

3と4も、同じ理由ですね。
3のidの数は0 4のidの数は1つです。idの数は4のほうが多いので、CSSは4のほうが優先されます。
classの数や要素の数では3のほうが多くても、idの数は4のほうが多いので一切考慮されません。

セレクタはソースコードではなく開発者ツールから見るべし

ソースコードでセレクタを見るのはもうしんどいので、
開発者ツールからCSSのセレクタの数を知ることが出来ます。

Assigning property values, Cascading, and Inheritance