Css：要素の同じクラスを繰り返すと、何かの動作が変わるのですか？

Question

ほとんど好奇心から、私のような例から生じ得る任意のエッジケースがあるかどうかを知りたい：（class2が2回表示されます）

<span class="class1 class2 class3 class2 class4">...</span> 

が

または

<span class="class1 class2 class3 class2 class2 class2 class3 class4 class4 class3">...</span> 

（より極端なバージョンの同じ）

これは明らかに乱雑なCSSと理想的ではないが、arこれで作成されるエッジケースはありますか？

Answer 1

いいえ、どれも一切、あなたはclass属性を使用しての習慣がない限り：

[class="class1 class2"] { 
    /* ... */ 
} 

の代わり：もちろん、ひどい練習をある

.class1.class2 { 
    /* ... */ 
} 

を。あなたの質問をjavascriptをタグ付けされていないものの、

---

また、クラスの最初のインスタンスのみが削除された場合、無制限の数が、追加されたことに注意は言う：

function addClass(element, cls) { 
    element.className += ' ' + cls; 
} 

しかし

function removeClass(element, cls) { 
    return element.className.replace(cls, ' '); 
} 

これは、複数の方法で問題を引き起こします。

Answer 2

いいえ、何もありませんが間違っていますと違って見えます。クラス名の再現は、これまで何にも影響しません。それ以前に定義されたクラスからスタイルを適用した後は、それらのスタイルを「再適用」しません。 CSSは常に、そのレベルの特異性についてlastと定義されたスタイルを選択することを覚えておいてください。

このjsFiddleを参照してくださいCLASS4 は常に関係なく使用されているクラス1、クラス2、およびClass3のどのような組み合わせで、フォントの色を上書きしないか注意してください。

最終的には、クラス名class1を持ち、クラス名class2を持ち、クラス名class3を持ち、クラス名class4を持っています。それらを繰り返すことはラジオボタンをもう一度クリックするようなものです。それは、すでに選択されている、それをクリックして維持する必要はありません... FYI

Answer 3

なFirefoxの/クローム/ IE9、ルールツリーを使用してスタイルコンテキストを計算

として

ブラウザ、

2つのルールの重み、起点、および特異度が同じ場合、スタイルシートの下に書かれたルールはになります。そう ...

スタイル：

.c1 {background:red;}.c1.c3 {background:blue;}.c2 {background:orange;} 

は、ケース1：

<div class="c1 c1 c1"/><!-- background is red --> 

事例2：

<div class="c1 c2"/><div class="c2 c1 c2"/><!-- background is orange --> 

CASE3：

<div class="c2 c1 c1 c2 c3"/><!-- background is blue -->