February 11, 2004
CSSの適応順位??
昨日に続きCSSによるデザインの話なんですが、実は新発見、スタイルは書いた順で優先順位が決まることがわかりました(知らなかったのは自分だけかもしれませんが…)。何はともあれ、以下の例文を見てください。
<style>
.div1 a {text-decoration: underline;}
.div2 a {text-decoration: none;}
.div3 a {text-decoration: underline;}
</style>
<div class="div1"><a>div1の中です。</a>
<div class="div2"><a>div2の中です。</a>
<div class="div3"><a>div3の中です。</a></div>
</div>
</div>
.div1 a {text-decoration: underline;}
.div2 a {text-decoration: none;}
.div3 a {text-decoration: underline;}
</style>
<div class="div1"><a>div1の中です。</a>
<div class="div2"><a>div2の中です。</a>
<div class="div3"><a>div3の中です。</a></div>
</div>
</div>
↓表示されるのは
しかし、次のようにdiv2とdiv3のスタイルの順を入れ替えると
<style>
.div1 a {text-decoration: underline;}
.div3 a {text-decoration: underline;}
.div2 a {text-decoration: none;}
</style>
<div class="div1"><a>div1の中です。</a>
<div class="div2"><a>div2の中です。</a>
<div class="div3"><a>div3の中です。</a></div>
</div>
</div>
.div1 a {text-decoration: underline;}
.div3 a {text-decoration: underline;}
.div2 a {text-decoration: none;}
</style>
<div class="div1"><a>div1の中です。</a>
<div class="div2"><a>div2の中です。</a>
<div class="div3"><a>div3の中です。</a></div>
</div>
</div>
↓表示されるのは
でdiv3に適用したはずの下線が表示されません。
考察すると、スタイルシートの中であらわれた順にスタイルが上書きされているのだと考えられます。このことから考えるに、優先順位の高いスタイルほど下に書かなければならないということではないでしょうか。
コメント
O'ReillyのCascading Style Sheetからの引用ですが、
... if two rules have exactly the same weight, origin, and specifity, then the one that occurs later in the style sheet wins out.
とのことで、この例ではどの.div? aセレクタも同じspecifityなので後のモノで上書きされたということになるみたいですね(受け売りでスイマセン)。
多分、このヘンは件の書籍のChapter 2. Selectors and Structure辺りをご覧になると目から鱗なところが多いと思います。
情報ありがとうございます。
今まではWebから適当に情報をあつめてCSSの実践をしてきたので、ここらでまとめて本でも読んでみることにします。
コメントする
スポンサード リンク