同じエレメントを指定して、なぜか表示が変わらない。

スタイルシートというのは、いまだ原始的な形態を保ち続け、多少なりとも論理を重視するプログラマ人種にとっての頭痛の種といえるでしょう。進化を続けるネット世界で、基準を設定するのは至難の業、軍閥割拠のジャングルのなかで右往左往してサバイバルゲームを続けるしかない。

で、今日の話題はエレメントの指定方法。スタイルシートで、同じエレメントを指定して、なぜか表示が変わらない。

table.background tr td
{
background-color:red;
}
table.background td
{
background-color:blue;
}

赤い指定をオーバーライドしているのに、これが青くならない。

<table class="background">
<tr><td>test<td>test
<tr><td>test<td>test
</table>

上記のスタイルの指定をよく見てみると、エレメントの指定方法に違いがあります。なぜか tr タグの指定が効いてるんですね。構造を書くと、そちらが優先されるアルゴリズムであるわけです。

これが意味のある基準であるかどうかはさておいて、知っておかないと他人のスタイルシートを使うときに困ることは間違いなしです。