Css：在元素上重複相同的類會改變任何行爲嗎？

Question

大多是出於好奇，我想知道是否有可能從案件發生像任何邊緣情況：

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

（class2列出了兩次）

或

<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將始終選擇爲特定級別定義的最後的樣式。

看到這個jsFiddle並且注意class4 總是覆蓋字體顏色，不管使用什麼樣的class1，class2和class3的組合。

最終，它被視爲具有類名稱class1，具有類名稱class2，具有類名稱class3，並具有類名稱class4。重複它們就像再次單擊單選按鈕。它已經選定，沒有必要不斷地點擊它...

Answer 3

FYI

瀏覽器如Firefox /鉻/ IE9，

使用規則樹計算樣式上下文，

如果兩條規則具有相同的權重，起源和特異性，則樣式表中較低的一條勝過。所以......

風格：

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

情形3：

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