cssが適用される優先順位

たまに混乱してしまうのでまとめます。

  • idはclassより強い
  • 階層が深いほうが強い
  • styleを直接書くのが一番強い

idはclassより強い

この場合は、idの方が強いので背景色は赤色になります。

<div id="hoge" class="hoge"></div>
#hoge {
    background-color: red;
}
.hoge {
    background-color: green;
}

階層が深いほうが強い

この場合、階層の深いほうが強いので、後から.hogeの背景色を変えたとしても、.fugaの子階層にある.hogeの背景色は変わりません。

<div class="fuga"><div class="hoge"></div></div>
<div class="hoge"></div>
.fuga .hoge {
    background-color: red;    
}
.hoge {
    background-color: green;
}

styleを直接書くのが一番強い

たとえidで背景色を指定していても、要素に直接styleが書かれていた場合は、その値が適用されます。
この場合は、背景は緑色になります。

<div id="hoge" style="background-color: green;"></div>
#hoge {
    background-color: red;
}