初めましての方は初めまして。
そうでない方がいたらいいなと思いますが、はじめまして。
CSS は一つの要素に複数の定義が適用されることがありますが、そこには優先順位があります。
その順位は、 W3C によって定められています。
http://www.w3.org/TR/CSS21/cascade.html
これによると、 <p id=first class='second third'>something</p> みたいなコードがあるとすると、まず #first な定義が適用され、次に .second と .third が適用され、最後に p が適用されます。
その優先順位は優先度の高い数字から順に連結することで得られ、例えば #first なら 0100 、 .second p.third なら 0021 のようになるようです。
ここまでは少し検索すれば出てきます。
ところで、この優先順位、なんだか逆転できそうな気がします。
具体的には以下のコードです。
<style>
span span span span span span span span span span.p{color: red;}
.p .p .p .p .p .p .p .p .p .p{color: blue;}
.q{font-style:italic;}
.r{font-style:normal;}
</style>
<span class=p>
<span class=p>
<span class=p>
<span class=p>
<span class=p>
<span class=p>
<span class=p>
<span class=p>
<span class=p>
<span class='p q r'>
test
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
これで、赤が 00110 の優先度、青が 00100 の優先度になって逆転するんじゃないかと。
実際にコピーして表示してみましょう。
どうですか？
当然、青でした。
が、よくよく考えると、ここは 16 進数なのではなかろうか？
具体的には以下のコードなら繰り上がりが発生するのではないか？
<style>
span span span span span span span span span span span span span span span span.p{color: red;}
.p .p .p .p .p .p .p .p .p .p .p .p .p .p .p .p{color: blue;}
.q{font-style:italic;}
.r{font-style:normal;}
</style>
<span class=p>
<span class=p>
<span class=p>
<span class=p>
<span class=p>
<span class=p>
<span class=p>
<span class=p>
<span class=p>
<span class=p>
<span class=p>
<span class=p>
<span class=p>
<span class=p>
<span class=p>
<span class='p q r'>
test
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
数えるのも嫌になりますが、 span が 16 個のはずです。
これをコピーしてみて下さい。
どうですか？
当然、青ですよね。
もしかしたら、 2^16 個くらい書けば繰り上がるかもしれません。
符号付き整数で管理していれば、 2^15 でいけるでしょう。
もっとも、 1PB ものファイル容量になりますし、メモリはもっとひどいことになりそうです。
ともかく、これでもし 10 階層もネストした HTML を管理することになっても安心です。
そんな HTML になっていること自体、問題があるような気もしますけど。
ついでに class 指定の順番で優先度に変化があるか見てみましたが、やはり style の指定順で適用されるようです。
HTML 側のコードの順番に悩まなくて済みますね。