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; }