Css 可以使用逗号将多个类分配给一个元素吗？

我刚在一个网站上看到这个。。这是我以前从未见过的，在任何地方都找不到任何解释，所以我希望有人能解释

因此，我遇到了一个元素，它用以下格式的2个类标记：

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

我以前从未见过为这样的元素分配多个类。。在我看来，它就像一个选择器。。我希望它们可以这样添加：（不带逗号）

---

这是我以前从未访问过的有效CSS，还是我在页面上发现了一个稍微奇怪的错误？

根据规范，第一个是无效的：

class=cdata列表[CS]此属性指定一个类名或一组 元素的类名称。可以将任意数量的元素分配给 相同的类名多个类名必须用分隔符分隔 空白字符

第二个是有效的

参考资料

---

根据规范，第一个无效：

class=cdata列表[CS]此属性指定一个类名或一组 元素的类名称。可以将任意数量的元素分配给 相同的类名多个类名必须用分隔符分隔 空白字符

第二个是有效的

参考资料

---

示例语法不正确。可接受的标记应如下所示

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

---

但这是为了处理一个与显示的示例完全不同的类。

该示例的语法不正确。可接受的标记应如下所示

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

---

但这是为了处理一个与所示示例完全不同的类。

只是为了添加一点比目前其他答案更多的信息：

正确的语法（正如大家所说）是第二个空格分隔的

如果使用第一个（逗号分隔），则将不应用紧跟其后带有逗号的类，但任何其他类都将应用该类。例如：

将仅对div应用class2

仅适用于类别1

将成功应用这两个类

都不会加载

请注意，这扩展了两个以上的类：

class=“class1 class2，class3”

将应用class1和class3

---

结果表明，您尝试添加的任何包含无效或未转义特殊字符（请参阅和）的类名都不会加载，但不会停止加载其他有效类名。由于类是空格分隔的，DOM将

“class1，class2”

解释为两个类

class1，

和

class2

，并确定

class1，

无效，因为

，

是CSS中的一个特殊字符。

只是为了比目前的其他答案添加一点额外信息：

正确的语法（正如大家所说）是第二个空格分隔的

如果使用第一个（逗号分隔），则将不应用紧跟其后带有逗号的类，但任何其他类都将应用该类。例如：

将仅对div应用class2

仅适用于类别1

将成功应用这两个类

都不会加载

请注意，这扩展了两个以上的类：

class=“class1 class2，class3”

将应用class1和class3

---

结果表明，您尝试添加的任何包含无效或未转义特殊字符（请参阅和）的类名都不会加载，但不会停止加载其他有效类名。由于类是空格分隔的，DOM将

“class1，class2”

解释为两个类

class1，

和

class2

，并将

class1，

确定为无效的

，

是CSS中的一个特殊字符。

您可以使用data-*属性将类分配给任何以逗号分隔的元素，然后使用一些JavaScript自动分配类，删除逗号。从技术上讲，存储在数据类属性（假设）中的类作为一个整体是一个字符串。获取该字符串使用string的split方法存储类名，从n-between中删除逗号，并运行for循环将值分配给rea'class'属性

这是我编写的脚本-

//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]);
  }
});

//helper函数，返回与作为参数传递的选择器匹配的所有元素
函数$$（选择器）{
var元素=document.querySelectorAll（选择器）；
返回[].slice.call（元素）；
}
//选择具有[data classes]属性的所有元素，然后执行操作
$$（“[数据类]”）.forEach（函数（el）{
var dataClasses=el.getAttribute（“数据类”）；
var classes=dataClasses.split（“，”）；
对于（var i=0；i您可以使用data-*属性将类分配给任何由逗号分隔的元素，然后使用一些JavaScript自动分配类，删除逗号。从技术上讲，您存储在data class属性中的类（假设）是作为一个整体的字符串。获取该字符串时，请使用string的split方法存储类名，从n-between中删除逗号，并运行for循环以将值分配给rea“class”属性

这是我编写的脚本-

//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]);
  }
});

//helper函数，返回与作为参数传递的选择器匹配的所有元素
函数$$（选择器）{
var元素=document.querySelectorAll（选择器）；
返回[].slice.call（元素）；
}
//选择具有[data classes]属性的所有元素，然后执行操作
$$（“[数据类]”）.forEach（函数（el）{
var dataClasses=el.getAttribute（“d
<button data-classes="button,button-large,button-fancy">You Button</button>