CSSのカスケート(1)スタイルの優先順位

CSSを書くとき、IDとかclassで指定していきますが、思うような動きをしてくれないときがあります。スペルミスとかできちっとCSSが指定できてないってことはないのに、なぜか、うまく反応してくれない・・・。はてー。となります。とりあえず、指定するセレクタを長くしてみると、反応した、っていうこと、結構あって、なぜにぃ~と思います。基本は、後から書いたほうが上書きするとか、クラスやIDに点がついててその足し算したのが、関係してるらしい、ということまではなんとかなったんですが・・・。で、調べなきゃ、永遠に「駆け出し」も「見習い」も取れないよー、と勉強ですぅ。

ということで、前々から気になっていた、本家本元のW3Cのサイトを見てみました。ひぇー、英語じゃん。って当たり前ですね。すんません。翻訳サイトとかも見ながら、英語、読んでみました。

スタイルの優先順位(CSS2.1の場合)

  1. ブラウザ<ユーザー<製作者<important付き製作者<important付きユーザ
  2. セレクタの詳細度がより高い方が、詳細度が低いほうを上書きする。
  3. セレクタの詳細度が同じ場合、あとからかかれたものが優先される。

詳細度の計算方法は、セレクタを点数付けすする。点数は、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点。で、下のみどり。


と、いくつも例題をやってみることで、なんとなく、見えてきたような。ということで、こんどは、もっといろいろといてみようと、思う見習いですが・・・。乞うご期待?

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


コメントフィード

トラックバックURL: https://pc.beginners-luck.net/pcwp/2011/11/06/csscascading1.html/trackback