掲示板/スタイルシート質問板/過去ログ/一覧/ 優先順位の問題とは違うのだろうか。

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">

</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: 匿名さん、

アドバイスありがとうございます。
”処理時間の問題”もあるのですね、説明を読んでいて納得しきりです。

おっしゃるように”継承”を良く理解し、うまく利用するということですね。
良く分かりました。

ありがとうございました。

サスケ