41

.classname特異性が最も高い CSS セレクター (つまり< )が優先されることはわかってい#idnameます。

また、物事が同じ特異性である場合、最後に呼び出されたステートメントが優先されることも知っています。

.classname1 { color: red; }
.classname1 { color: blue; } // classname1 color will be blue

DOM 要素上の HTML クラスの順序はステートメントの優先度に影響しますか?

4

3 に答える 3

68

ジョンとワトソンの答えには少し反対しなければなりません...

はい、できます（ステートメントによって異なります）

あなたの質問は次のとおりです。

DOM 要素の CSS クラスの順序はステートメントの優先度に影響しますか?

どちらが問題のステートメントに依存します。

通常、HTML の順序は重要ではありません

以下は、クラスへの直接の呼び出し (つまりまたは) または結合された呼び出し (つまりまたは)に関しては同等です。.class1.class2.class1.class2.class2.class1

<div class="class1 class2"></div>
<div class="class2 class1"></div>

上記の HTML のステートメントの優先度が HTML の順序に基づいて影響を受ける可能性があるケース

HTML で順序付けが重要になる主な場所は、CSS で属性セレクターを使用する場合です。

例 1 属性値の一致を求める次のコードを使用するFiddleでは、フォントの色はまったく変更されずdiv、クラスの順序によりそれぞれのプロパティが異なります。

[class="class1"] {
    color: red;
}

[class="class1 class2"] {
    background-color: yellow;
}

[class="class2 class1"] {
    border: 1px solid blue;
}

例 2次のコードを使用して属性値の先頭と一致させようとするFiddleでは、2 番目のフォントの色は変更されずdivそれぞれdivのプロパティが異なります。

[class^="class1"] {
    color: red;
}

[class^="class1 class2"] {
    background-color: yellow;
}

[class^="class2 class1"] {
    border: 1px solid blue;
}

例 3次のコードを使用して属性値の末尾に一致させようとするFiddleでは、最初の のフォントの色は変更されずdivそれぞれdivのプロパティが異なります。

[class$="class1"] {
    color: red;
}

[class$="class1 class2"] {
    background-color: yellow;
}

[class$="class2 class1"] {
    border: 1px solid blue;
}

「優先順位」についての明確な声明

明確にするために、上記の場合、「ステートメントの優先度」に関する限り影響を受けるのは、ステートメントが実際に要素に適用されるかどうかの問題です。しかし、ある意味では適用するかどうかが基本的な優先順位であり、上記は実際には (クラスの有無ではなく) HTML Dom 要素上のクラスの順序に基づいて適用される場合であるため、これを答えとして追加する価値があると思いました。

クラス順序付けの有効な使用の可能性?

これは、BoltClock のコメントに基づいて、私に思い浮かんだ考えです。さまざまなスタイリングにとって重要と見なされる要素に基づいて、要素のスタイルを設定するために使用される 2 つのクラスのみを検討してください。これらの 2 つのクラスは、理論的には、属性セレクターの組み合わせを使用して 11 の異なる個別のクラスの使用を置き換えることができます (実際、後で説明するように、可能性は 1 つのクラスだけでほぼ無限ですが、これについては後で説明します。投稿は複数のクラスの注文についてです)。これら 2 つのクラスでは、要素のスタイルを次のように変えることができます。

これらの HTML の組み合わせを想定

<div class="class1">Element 1</div>
<div class="class2">Element 2</div>
<div class="class1 class2">Element 3</div>
<div class="class2 class1">Element 4</div>

CSS の可能性

/* simply has the class */
.class1 {} /* affects elements 1, 3, 4 */
.class2 {} /* affects elements 2-4 */
/* has only a single class */
[class="class1"] {} /* affects element 1 only */
[class="class2"] {} /* affects element 2 only */
/* simply has both classes */
.class1.class2 {} /* affects elements 3-4 */
/* has both classes, but in a particular order */
[class="class1 class2"] {} /* affects element 3 only */
[class="class2 class1"] {} /* affects element 4 only */
/* begins with a class */
[class^="class1"] {} /* affects elements 1 & 3 only */
[class^="class2"] {} /* affects elements 2 & 4 only */
/* ends with a class 
   NOTE: that with only two classes, this is the reverse of the above and is somewhat
   superfluous; however, if a third class is introduced, then the beginning and ending 
   class combinations become more relevant.
*/
[class$="class1"] {} /* affects elements 2 & 4 only */
[class$="class2"] {} /* affects elements 1 & 3 only */

私の計算が正しければ、3 つのクラスで少なくとも 40 のセレクター オプションの組み合わせが得られます。

[attr*=value]「無限の」可能性についての私のメモを明確にするために、適切なロジックが与えられた場合、単一のクラスに、構文を介して検索されるコードの組み合わせが潜在的に埋め込まれている可能性があります。

これは複雑すぎて管理できませんか? おそらく。それは、それがどのように実装されているかのロジックに依存する場合があります。私が強調しようとしている点は、CSS3 では、必要に応じて計画を立てれば、クラスの順序付けを重要なものにすることができるということです。CSS の力をそのように利用することは、ひどく間違っているわけではありません。

于 2013-03-28T01:47:08.047 に答える
13

いいえ、違います。W3C 標準の関連部分では、クラスの出現順序について言及されていません。

于 2013-03-27T22:22:08.937 に答える
10

いいえ、あなたが言ったように、2 つのルールが同じ特異性を持つ場合、CSS で後で来るルールが適用されます。

于 2013-03-27T22:21:26.460 に答える