優先順位の問題とは違うのだろうか。
-
0 名前： サスケ ： 2007/04/12（木） 10:07 ID:XyomsCV0 sub-v7
- お世話になります。
ＣＳＳが影響を与える優先順位について考えていたのですが、
下記の場合”優先順位”の問題ではなく記述の問題なのでしょうか。
外部から読み込むＣＳＳファイルより、ＨＴＭＬに記述されたＣＳＳの方が優先順位は高いですよね。
下記の記述をすると外部ＣＳＳ記述が優先されてしまうのがよく分かりません。
（というがやたら考えていたら頭が混乱気味なのですが）
ＨＴＭＬの[body]にクラス[クラス名はtest]を設定してあります。
茶色の[Test Box]の幅（ここでは縦幅）をＨＴＭＬ側の記述で優先させるには<body>に設定した
クラス名の”test”を記述し
.test #box {
height: 〜px;
}
としなければならないのでしょうか、
#box {
height: 〜px;
}
でも優先されていいようなきがするのですが。う〜ん。
どなたかすごく簡単にアドバイスをいただけませんでしょうか。
宜しくお願いいたします。
※外部から読み込むＣＳＳの記述です。
.test #box {
height: 300px;
}
※ＨＴＭＬの記述です。
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN'
'http://www.w3.org/TR/html4/strict.dtd'>
<HTML lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<TITLE></TITLE>
<link href="../css/bbb.css" rel="stylesheet" type="text/css">
<STYLE TYPE="text/css">
<!--
* { margin: 0; padding: 0; }
body {
background: #37393b;
}
#box {
width: 100px;
height: 200px;
margin: 30px auto 0px auto;
color: #ffffff;
background-color:#B46609;
}
-->
</style>
</head>
<body class="test">
<div id="box">Test Box</div>
</body>
</html>
-
1 名前： カヅサツ ◆ThCi95HEzw ： 2007/04/12（木） 10:07 ［URL］ ID:O5hEMlpW sub-r2
- > クラス名の”test”を記述し
> .test #box {
> height: 〜px;
> }
> としなければならないのでしょうか、
それで合ってます。
> どなたかすごく簡単にアドバイスをいただけませんでしょうか。
ええと、すごく簡単に言うと、限定的に指定すればするほど優先度は高くなります。
「id属性値が "box" であるすべての要素」
よりも
「class属性値が "test" であり、かつ、id属性値が "box" であるすべての要素」
の方が、より細かく条件付けされていますよね。
-
2 名前： サスケ ： 2007/04/12（木） 10:07 ID:XyomsCV0 sub-v7
- カヅサツさん、
分かりました！
”限定的に指定すればするほど優先度は高くなります”は知りませんでした、
分かりやすく簡潔なアドバイス、本当にありがとうございました。
とても助かりました。
サスケ
-
3 名前： 匿名 ： 2007/04/12（木） 10:07 ID:z4uQsZWC sub-Cz
- 補足と言うか、
>>0
> 外部から読み込むＣＳＳファイルより、ＨＴＭＬに記述されたＣＳＳの方が優先順位は高いですよね。
そんなルールはないよ。
(1). ブラウザスタイル < ユーザスタイル < 制作者スタイル < 制作者 important スタイル < ユーザ important スタイル。@import されたルールは、そのスタイルシートの最初に展開される。
(2). セレクタの詳細度 (a, b, c, d) を計算する。
・セレクタではなく style 属性なら a = 1
・セレクタに ID 指定があれば b += 1
・セレクタに属性（クラス指定）・疑似クラスがあれば c += 1
・セレクタに要素名・疑似要素があれば d += 1
・a-b-c-d を連結した数値が、そのセレクタの詳細度
だから、.test #box の詳細度は (0, 1, 1, 0) → 110、#box の詳細度は (0, 1, 0, 0) → 100。
(3). 出自 (1) も詳細度 (2) も同じなら、より後ろのセレクタが勝つ。
-
4 名前： サスケ ： 2007/04/12（木） 10:07 ID:7ix2TPVy sub-v7
- 匿名さん
分かりやすいアドバイスありがとうございました、
ＣＳＳの優先順位はセレクタの獲得ポイントで決まるのですね、知りませんでした。
また”出所”や”位置”によっても優先順位に影響を与えることもだいぶ理解できました。
そこで思ったのですが”獲得ポイント”が同等の指定に対して獲得ポイントを上げるために、どんな記述の場合でもとりあえず”body .#main .con ”と[body]を頭につけて１ポイントをプラスさせるのは○でしょうか。
なんとなく間違っているような気もしますが、これでも良いような気もします。
宜しくお願いいたします。
-
5 名前： 匿名 ： 2007/04/12（木） 10:07 ID:z4uQsZWC sub-Cz
- >>4
> セレクタの獲得ポイント
現実にはポイント計算で処理するのだが、本質的には >>1 が言うように「より限定的な指定が勝つ」ということ。
> body #main .con ”と[body]を頭につけて１ポイントをプラスさせるのは○でしょうか。
優先順位を上げるという意味ではアリ。もっと言えば、.test は *.test の省略形だから、div.test の方が詳細度が高い。
だが、このように書くと、今度は処理時間の問題が生じる。そもそも ID はページ内に 1 つしかないのだから、ブラウザは #main をすぐに探せるはず。なのに要素名 body で限定すると、ブラウザはまず body を探し、それから #main を探すかもしれない。つまり、無駄な探索を行うかもしれない。
処理時間はブラウザによって異なるのだが、例えば Mozilla/Firefox にとっての効率的な CSS の書き方は
http://www.mozilla-japan.org/xpfe/goodcss.html
にまとめられている（かなり古いが、一応）。
詳細度を上げれば、処理時間もかかる。上記ページにもあるが、継承を利用し、省略で手抜きできる部分は手を抜き、うまくバランスをとろう。
-
6 名前： サスケ ： 2007/04/12（木） 10:07 ID:PihH9EKL sub-v7
- 匿名さん、
アドバイスありがとうございます。
”処理時間の問題”もあるのですね、説明を読んでいて納得しきりです。
おっしゃるように”継承”を良く理解し、うまく利用するということですね。
良く分かりました。
ありがとうございました。
サスケ
