にっき
2007/01/23 18:58:30
複合くらす
１つの要素に２つ以上のくらすを指定するのは『半角すぺ〜す』で区切ればおっけぃ☆
でもその２つ以上のくらすが付いてる要素だけにすたいるを適用する方法がよくわかんなかったから調べてみたけど・・・
仕様どおりにいかないのはおやくそくにう？（つｘ；【みかん
W3C にある CSS2 の仕様よると
引用：
ってあるから
このHTMLでは『red bold』と『bold red』って指定した上の２つだけが赤くて太くなる予定なんだけど・・・
左から IE7，Firefox，Opera ばっちり・・・にう？
って思ったけど IE6 だと
なかんじでかなりだめっぽいのにう（つｘ；【みかん
and を or で実装しちゃいましたならまだわかるんだけどこの動作を見てると
最後に描いたせれくたが適用されてるだけってかんじなのかなぁ？
IE7 でも DOCTYPE を
にするとおんなじ現象になっちゃうっぽいのにう（つｘ；【みかん
でも XHTML や HTML 4.01 Strict だと仕様どおりってなんだかいろいろとおかしな実装されてるのかにゃぁ・・・
ついでにすたいるの適用る〜るに気になるのを見つけたからめもめも☆
引用：
引用：
ってことで HTML で要素に直接
みたいに描くと最優先だけど，それ以外は id が最優先ってわけでもなくて
で計算した priority がいちばん大きいのが最優先っぽいにう．．．〆（・ｘ・。【みかん
priority がおんなじときは後から描いたので上書き☆
これだとときどき id を指定したのに変わんなくて不思議だった謎が解けた気がするにう（ーｘー；【みかん
でもこの式だとたぐを１００階層以上創ってぺちぺちと指定するとたぐだけで id に勝てるのかにゃぁ？
なんていってたらついやっちゃったにう ｄ（´ω｀；【みかん
結果は・・・
やっぱり ID にたぐだけで勝つことは無理っぽいにう（つｘ；【みかん
念のためちゃんとできてるかちぇっくするために id のすたいるを削ると・・・
・・・ IE だけ効かないなんてげいつさんだめだめにう（´・ω・｀；【みかん
でもその２つ以上のくらすが付いてる要素だけにすたいるを適用する方法がよくわかんなかったから調べてみたけど・・・
仕様どおりにいかないのはおやくそくにう？（つｘ；【みかん
W3C にある CSS2 の仕様よると
引用：
To match a subset of "class" values, each value must be preceded by a ".", in any order.
Example(s):
For example, the following rule matches any P element whose "class" attribute has been assigned a list of space-separated values that includes "pastoral" and "marine":
P.pastoral.marine { color: green }
This rule matches when class="pastoral blue aqua marine" but does not match for class="pastoral blue".
ってあるから
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-language" content="ja" />
<meta http-equiv="content-style-type" content="text/css" />
<style type="text/css"><!--
.bold.red
{
color : #ff0000;
font-weight : bold;
}
--></style>
<title>test page</title>
</head>
<body>
<div class="red bold">red bold</div>
<div class="bold red">bold red</div>
<div class="bold">bold</div>
<div class="red">red</div>
<div>none</div>
</body>
</html>このHTMLでは『red bold』と『bold red』って指定した上の２つだけが赤くて太くなる予定なんだけど・・・
左から IE7，Firefox，Opera ばっちり・・・にう？
って思ったけど IE6 だと
なかんじでかなりだめっぽいのにう（つｘ；【みかん
and を or で実装しちゃいましたならまだわかるんだけどこの動作を見てると
最後に描いたせれくたが適用されてるだけってかんじなのかなぁ？
IE7 でも DOCTYPE を
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">にするとおんなじ現象になっちゃうっぽいのにう（つｘ；【みかん
でも XHTML や HTML 4.01 Strict だと仕様どおりってなんだかいろいろとおかしな実装されてるのかにゃぁ・・・
ついでにすたいるの適用る〜るに気になるのを見つけたからめもめも☆
引用：
count the number of ID attributes in the selector (= a)
count the number of other attributes and pseudo-classes in the selector (= b)
count the number of element names in the selector (= c)
ignore pseudo-elements.
引用：
In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, but for the purpose of step 3 of the cascade algorithm, they are considered to have an ID selector (specificity: a=1, b=0, c=0). For the purpose of step 4, they are considered to be after all other rules.
ってことで HTML で要素に直接
style="XXX"みたいに描くと最優先だけど，それ以外は id が最優先ってわけでもなくて
priority = id x 100 + class x 10 + tag x 1で計算した priority がいちばん大きいのが最優先っぽいにう．．．〆（・ｘ・。【みかん
priority がおんなじときは後から描いたので上書き☆
これだとときどき id を指定したのに変わんなくて不思議だった謎が解けた気がするにう（ーｘー；【みかん
でもこの式だとたぐを１００階層以上創ってぺちぺちと指定するとたぐだけで id に勝てるのかにゃぁ？
なんていってたらついやっちゃったにう ｄ（´ω｀；【みかん
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-language" content="ja" />
<meta http-equiv="content-style-type" content="text/css" />
<style type="text/css"><!--
div div div div div div div div div div
div div div div div div div div div div
div div div div div div div div div div
div div div div div div div div div div
div div div div div div div div div div
div div div div div div div div div div
div div div div div div div div div div
div div div div div div div div div div
div div div div div div div div div div
div div div div div div div div div div
div
{
color : red;
}
#blue
{
color : blue;
}
--></style>
<title>test page</title>
</head>
<body>
<div><div><div><div><div><div><div><div><div><div>
<div><div><div><div><div><div><div><div><div><div>
<div><div><div><div><div><div><div><div><div><div>
<div><div><div><div><div><div><div><div><div><div>
<div><div><div><div><div><div><div><div><div><div>
<div><div><div><div><div><div><div><div><div><div>
<div><div><div><div><div><div><div><div><div><div>
<div><div><div><div><div><div><div><div><div><div>
<div><div><div><div><div><div><div><div><div><div>
<div><div><div><div><div><div><div><div><div><div>
<div id="blue">test</div>
</div></div></div></div></div></div></div></div></div></div>
</div></div></div></div></div></div></div></div></div></div>
</div></div></div></div></div></div></div></div></div></div>
</div></div></div></div></div></div></div></div></div></div>
</div></div></div></div></div></div></div></div></div></div>
</div></div></div></div></div></div></div></div></div></div>
</div></div></div></div></div></div></div></div></div></div>
</div></div></div></div></div></div></div></div></div></div>
</div></div></div></div></div></div></div></div></div></div>
</div></div></div></div></div></div></div></div></div></div>
</body>
</html>結果は・・・
やっぱり ID にたぐだけで勝つことは無理っぽいにう（つｘ；【みかん
念のためちゃんとできてるかちぇっくするために id のすたいるを削ると・・・
・・・ IE だけ効かないなんてげいつさんだめだめにう（´・ω・｀；【みかん
こめんと
投稿された内容の著作権はこめんとの投稿者に帰属するっぽいです☆また，現在 IE6 以下で Sleipnir，Lunascape，Donut じゃないゆ〜ざえ〜じぇんとからの描き込みを制限してますです☆
該当しちゃうかたはてきとうにゆ〜ざえ〜じぇんとを偽装しちゃってくださいです（´ω｀；【みかん
あじ
ＥＤ
えでん
えれふぃ
ぐらぶれ
etc
にっき