February 11, 2004

CSSの適応順位??

[Site Management]

昨日に続き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>

↓表示されるのは

しかし、次のように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>

↓表示されるのは

でdiv3に適用したはずの下線が表示されません。

考察すると、スタイルシートの中であらわれた順にスタイルが上書きされているのだと考えられます。このことから考えるに、優先順位の高いスタイルほど下に書かなければならないということではないでしょうか。

10:52 fenrir が投稿 : 固定リンク |
| このエントリーを含むはてなブックマーク | トラックバック
このエントリーのトラックバックURL: https://fenrir.naruoka.org/mt/mt-tb.cgi/169
コメント

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

情報ありがとうございます。
今まではWebから適当に情報をあつめてCSSの実践をしてきたので、ここらでまとめて本でも読んでみることにします。

Posted by: fenrir : February 11, 2004 09:47 PM
コメントする









名前、アドレスを登録しますか?
(次回以降コメント入力が楽になります)
  • 匿名でのコメントは受け付けておりません。
  • 名前（ハンドル名可）とメールアドレスは必ず入力してください。
  • メールアドレスを表示されたくないときはURLも必ず記入してください。
  • コメント欄でHTMLタグは使用できません。
  • コメント本文に日本語(全角文字)がある程度多く含まれている必要があります。
  • コメント欄内のURLと思われる文字列は自動的にリンクに変換されます。