CSSの優先順位で悩んだことはありませんか？
後書優先だと思ってたのに、反映してくれない！ってなったことがある人は多いんじゃないかと思います。
IDやクラスが入れ子になったときに発生しませんか？
どうやら、CSSの優先順位はセレクタの獲得ポイントできまるようです。
| *（全称セレクタ） | ０ポイント |
|---|---|
| タグ（p,h1など） | １ポイント |
| class（.smpなど） | １０ポイント |
| ID（#smpなど） | １００ポイント |
とのこと。
これが加算されていきくそうです。
つまり
#smp .red p { color:red; }
だと、100＋10＋1＝111ですね。
p.blue { color:blue; }
だと、1＋10＝１１ですね。
なので、上記二つが指定されている場合、
<div id="smp">
<div class="red">
<p class="blue">いろはにほへと</p>
</div>
</div>
としても、結果は
いろはにほへと
となるわけです。
なるほどねぇ。
