CSSが適用される優先順位

#outside div {
color: red;
}
#inside {
color: blue;
}

<div id="outside">
<div id="inside">Hello World</div>
</div>

こんな場合にHello Worldは何色で表示されるか。これは赤色になる。外側で指定している「id=”outside”のDIV」という指定の方が優先されている。
さて、例えば実装の都合上、<div id=”outside”>を変更することが出来ない場合にHello Worldの色を変更したいならどうするか。

#outside div {
color: red;
}
.inside {
color: blue;
}

<div id="outside">
<div class="inside">Hello World</div>
</div>

クラス指定に変えてみる。けれど、これは上手くいかない。これは「div.inside」というようにタグを限定しても同じで、タグのオブジェクトを指定しているIDには勝てない。
多分、解決方法は二つあって一つ目はstyle属性で指定してしまう。

<div id="outside">
<div style="color:blue">Hello World</div>
</div>

これは当然青色になる。あともう一つはID指定箇所を追加して、そこからタグ名で辿る。

#outside div {
color: red;
}
#inside div {
color: blue;
}

<div id="outside">
<div id="inside">
<div>Hello World</div>
</div>
</div>

これで「id=”outside”のDIV」という指定に打ち勝って「id=”inside”のDIV」という指定が優先される。
CSSがこのように優先付けされるのは必要な挙動。ID内のタグ指定でスタイルを設定する場合はその中に同名のタグが出てきたときに動きにくくなるので注意が必要。