スタイルの優先順位

セレクタの詳細度

スタイルはセレクタの詳細度によって優先が決まる。
(a) style = ""
(b) ID
(c) 属性/疑似クラス
(d) 要素/疑似要素

(a) > (b) > (c) > (d)

---HTML---
<a href="hoge" class="link search" id="site" style="color:green;">
。。。(a)  styleで記述するとCSS定義より優先
※importantを使用するとimportantが優先される。

---CSS---
a { color: skyblue; }　　　　。。。(d)
a.link { color:pink; }　　　　。。。(c)
a.search { color:orange; }　　。。。(c)  同レベルの場合、後に記述した方が優先
a#site { color:blue; }　　　　。。。(b)  クラスよりIDが優先

important

スタイルは通常、スタイルシートのインポート順に適用される。 （上の階層、親子関係で言えば子供が適用される）

importantを指定すると、階層を無視してスタイルを適用させることができる。

ex)  
padding: 0 !important;  

では、importantが重複した場合は？
この場合、important指定されているものの中で、上の階層のスタイルが適用される。

あとからあとから修正しているとこんなカオス状態になってしまう。
こうならないように気をつけて作成したいものです。