CSS选择器中的引号

Question

您更喜欢以下哪个CSS选择器？ （注意使用引号）

[class*=col-] {   /* all classes that contain 'col' */
    ...
}

[class*='col-'] { /* all classes that contain 'col' */
    ...
}

[class*="col-"] { /* all classes that contain 'col' */
    ...
}

Answer 1

我相信如果它是字母数字，你可以不加引号，只要它不包含“，”，“，=，＆lt;或＆gt;。

来自HTML规范：

  

属性放在开始标记内，由名称和值组成，用“=”字符分隔。如果属性值不包含空格字符或任何“'=＆lt;或＆gt;”，则属性值可以保持不加引号。否则，必须使用单引号或双引号引用属性值。该值以及“=”如果值为空字符串，则可以完全省略字符。

为了保持一致性，我更喜欢双引号。没有必要有时只使用它们 - 这会使代码变得混乱和不易阅读。

Answer 2

你可以查看这个有趣的Unquoted attribute values in HTML and CSS/JS selectors

  在交叉引用HTML的这三个不同部分之后

  spec，我们最终可以得出结论：有效的不带引号的属性值   HTML是任何不是空字符串的文本字符串   不包含空格，制表符，换行符，换页符，运输   返回，“，'，`，=，＆lt;，或＆gt;。

如果属性值是字母数字，则可以省略引号（但请检查上述文章中的例外情况）

Answer 3

[class*=col-] {   /* all classes that contain 'col' */
    ...
}

[class*=col-]用于查找元素（在标记内）包含带有字符串的类属性值的位置。