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に適用したはずの下線が表示されません。
考察すると、スタイルシートの中であらわれた順にスタイルが上書きされているのだと考えられます。このことから考えるに、優先順位の高いスタイルほど下に書かなければならないということではないでしょうか。
コメント
情報ありがとうございます。
今まではWebから適当に情報をあつめてCSSの実践をしてきたので、ここらでまとめて本でも読んでみることにします。
コメントする
- 匿名でのコメントは受け付けておりません。
- お名前（ハンドル名可）とメールアドレスは必ず入力してください。
- メールアドレスを表示されたくないときはURLも必ず記入してください。
- コメント欄でHTMLタグは使用できません。
- コメント本文に日本語(全角文字)がある程度多く含まれている必要があります。
- コメント欄内のURLと思われる文字列は自動的にリンクに変換されます。
- 投稿ボタンを押してエラーがでなければ、投稿は成功しています。反映されるまでには少し時間がかかります。
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辺りをご覧になると目から鱗なところが多いと思います。
Posted by: mya : February 11, 2004 12:27 PM