CSSのカスケート(1)スタイルの優先順位
CSSを書くとき、IDとかclassで指定していきますが、思うような動きをしてくれないときがあります。スペルミスとかできちっとCSSが指定できてないってことはないのに、なぜか、うまく反応してくれない・・・。はてー。となります。とりあえず、指定するセレクタを長くしてみると、反応した、っていうこと、結構あって、なぜにぃ~と思います。基本は、後から書いたほうが上書きするとか、クラスやIDに点がついててその足し算したのが、関係してるらしい、ということまではなんとかなったんですが・・・。で、調べなきゃ、永遠に「駆け出し」も「見習い」も取れないよー、と勉強ですぅ。
ということで、前々から気になっていた、本家本元のW3Cのサイトを見てみました。ひぇー、英語じゃん。って当たり前ですね。すんません。翻訳サイトとかも見ながら、英語、読んでみました。
スタイルの優先順位(CSS2.1の場合)
- ブラウザ<ユーザー<製作者<important付き製作者<important付きユーザ
- セレクタの詳細度がより高い方が、詳細度が低いほうを上書きする。
- セレクタの詳細度が同じ場合、あとからかかれたものが優先される。
詳細度の計算方法は、セレクタを点数付けすする。点数は、style=””で記述した場合、1000点、ID属性ひとつあたり100点、その他の属性および擬似クラスがひとつあたり、10点、要素および擬似要素ひとつあたり1点。これを足し算して、大きいものが優先順位が高くなるということです。
ただ、ここで、気がついたのですが、これを100点、とか、10点とか、考えないほうがいいような気がしてきました。本家サイトによると、style=””で決めたら、A、IDでB、その他の属性等でC、要素等でDとして、それをABCDのように4桁の数字に並べるのだと書いてあるようです。だから、たとえDである要素が10個集まっても、繰り上がってCのクラスと同等になるということではないような・・・。
ということで実験です。
HTMLのソースはこちら
<div id="d_id" class="d_class"><p id="p_id" class="p_class">
あいうえお</p></div>
CSS No.1
p{
color:#F00;
}
まず、最初、文字が赤いです。
CSS No.2
p{
color:#F00;
}
p.p_class{
color:#090;
}
上は、1点、下は1+10で11点。で、下のみどり。
CSS No.3
p.p_class{
color:#090;
}
p{
color:#F00;
}
上は、11点、下は1点。で、上のみどり。
CSS No.4
p#p_id{
color:#090;
}
p{
color:#F00;
}
上は、101点、下は1点。で、上のみどり。
CSS No.5
p#p_id{
color:#090;
}
p.p_class{
color:#F00;
}
上は、101点、下は11点。で、上のみどり。
CSS No.6
p#p_id{
color:#090;
}
div.d_class p.p_class{
color:#F00;
}
上は、101点、下は22点。で、上のみどり。
CSS No.7
p#p_id{
color:#090;
}
div#d_id p.p_class{
color:#F00;
}
上は、101点、下は112点。で、下のあか。
CSS No.8
p#p_id{
color:#090;
}
div#d_id .p_class{
color:#F00;
}
上は、101点、下は111点。で、下のあか。
CSS No.9
p#p_id{
color:#090;
}
div#d_id p{
color:#F00;
}
上は、101点、下は102点。で、下のあか。
CSS No.10
div#d_id p{
color:#F00;
}
p#p_id{
color:#090;
}
上は、102点、下は101点。で、上のあか。
CSS No.11
div#d_id {
color:#F00;
}
p#p_id{
color:#090;
}
上は、101点、下は101点。で、下のみどり。
CSS No.12
#d_id p{
color:#F00;
}
p#p_id{
color:#090;
}
上は、101点、下は101点。で、下のみどり。
CSS No.13
div#d_id p{
color:#F00;
}
p#p_id{
color:#090;
}
上は、102点、下は101点。で、上のあか。
CSS No.14
div#d_id p{
color:#F00;
}
div p#p_id{
color:#090;
}
上は、102点、下は102点。で、下のみどり。
と、いくつも例題をやってみることで、なんとなく、見えてきたような。ということで、こんどは、もっといろいろといてみようと、思う見習いですが・・・。乞うご期待?
2011年11月6日3:37 AM| カテゴリー: HTMLとCSSのコード,スクリーンショット,見習い奮闘記| コメント (0)
コメントフィード
トラックバックURL: https://pc.beginners-luck.net/pcwp/2011/11/06/csscascading1.html/trackback