多個類可以使用逗號分配給元素嗎？

我剛剛在一個網站上討論這個問題，即時通訊工作..它的東西之前沒有見過，無法在任何地方找到任何解釋，所以希望有人能解釋。多個類可以使用逗號分配給元素嗎？

所以我特地翻過了在下面的格式標記有2班的元素：

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

我從來沒有見過分配給元素像這樣多個類..它看起來像一個選擇對我來說..我希望他們能夠加入這樣的：（無逗號）

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

這是有效的CSS剛纔我從來沒有遇到翻過還是我剛剛發現在頁面上稍顯怪異的錯誤？

來源

2015-12-21 Ash

沒有錯誤。 **第二選項**是有效的，它總是這樣做的。 – nicael

對不起，你的意思是添加這樣的選擇器

有效嗎？ – Ash

「必須具有一個值，該值是由代表該元素所屬的各種類的**空格分隔**標記組成的」http://www.w3.org/TR/html5/dom.html#classes –

根據規格，第一個是無效：

類= CDATA列表[CS]該屬性分配一個類名稱或一組類名的元素。任何數量的元素都可以被分配到相同的類名或名稱。 多個類名稱必須用空格字符分隔。

第二個是有效的。

參考

class attribute

來源

2015-12-21 15:59:36

的例子是不正確的語法。可接受的標記應該如下

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

現在逗號分隔是在樣式表

.class1, class2 { 
    some styling 
}

可接受但是，這是用於處理類比顯示的示例完全不同。

來源

2015-12-21 16:00:47

我想補充的額外信息一點點比迄今爲止其他答案：

正確的語法（每個人都在說）是第二 - 用空格分開。
如果您使用第一個（以逗號分隔），那麼後面緊跟逗號的類將不會應用，但其他任何類將會使用。例如：

<div class="class1, class2">

適用類2只到div。

<div class="class1 class2,">

適用class1的唯一

<div class="class1 , class2">

將成功申請兩個類。

<div class="class1,class2">

將負載既不

請注意，此延伸超過兩個類：class="class1 class2, class3"適用的Class1和CLASS3，例如。

它發現您嘗試添加的任何類名包含無效或未轉義的特殊字符（請參閱Here和here）將不會加載，但不會阻止其他有效的類名加載。因爲類是空格分隔的，所以DOM將"class1, class2"解釋爲兩個類class1,和class2，並且確定class1,無效，因爲,是CSS中的特殊字符。

來源

2015-12-21 16:23:41

您可以使用data- *屬性將類分配給用逗號分隔的任何元素，然後使用一些JavaScript自動指定刪除逗號的類。從技術上講，你存儲在數據類屬性（假設）中的類是一個整體字符串。你抓住該字符串使用字符串的split方法來存儲從n-between中移除逗號的類名，並運行for循環來將值賦予rea類的'class'屬性。

這裏的劇本我coded-

//helper function which returns all the elements matching the selector passed as the argument 
function $$(selector) { 
    var elements= document.querySelectorAll(selector); 
    return [].slice.call(elements); 
} 

//select all elements having [data-classes] attribute and the do the stuff 
$$("[data-classes]").forEach(function(el) { 
    var dataClasses= el.getAttribute("data-classes"); 
    var classes= dataClasses.split(","); 

    for(var i=0; i<classes.length; i++) { 
    el.classList.add(classes[i]); 
    } 
});

現在，你可以不喜歡這個 -

<button data-classes="button,button-large,button-fancy">You Button</button>

（包括逗號/類名之間沒有空格）

注意：確保該腳本包含在<head>中的所有內容的頂部，以便它在加載頁面時運行的第一件事情，即使在所有CSS之前文件。

來源

2015-12-22 00:03:24

多個類可以使用逗號分配給元素嗎？

回答

相關問題