Question

我刚刚在一个正在研究的网站上遇到过这个...它以前没见过的东西，无法在任何地方找到任何解释，所以希望有人可以解释。

所以我来了一个以下列格式标记了2个类的元素：

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

我以前从未见过多个类分配给这样的元素..它看起来像我的选择器..我希望它们像这样添加:(没有逗号）

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

这是我之前从未遇到过的有效CSS还是我刚刚在页面上发现了一个有点奇怪的错误？

Answer 1

根据规格，第一个无效：

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

第二个是有效的。

<强>参考

class attribute

Answer 2

到目前为止，只是添加一些额外的信息，而不是其他答案：

正确的语法（就像每个人都说的那样）是第二个 - 空格分隔的。
如果您使用第一个（逗号分隔），那么直接使用逗号后面的类将无法应用，但任何其他类。例如：

<div class="class1, class2">

将仅限class2 应用于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。

Answer 3

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

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

现在可以在样式表中使用逗号分隔

.class1, class2 {
  some styling
 }

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

Answer 4

您可以使用data- *属性将类分配给由逗号分隔的任何元素，然后使用一些JavaScript自动分配删除逗号的类。从技术上讲，存储在data-classes属性（假设）中的类是一个整体的字符串。你抓住那个字符串使用字符串的split方法来存储从n-between中删除逗号的类名，并运行for循环以将值赋给rea＆＃39; class＆＃39;属性。

这是我编写的脚本 -

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

（逗号/ classNames之间不包含空格）

注意：请确保此脚本包含在<head>中所有内容的最顶层，以便它在加载页面时首先运行，即使在所有CSS之前也是如此文件。

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

4 个答案: