如何选择带空格的班级答案

【问题标题】：How to select classes with spaces如何选择带空格的班级
【发布时间】：2023-03-30 09:10:01
【问题描述】：

如何选择像class="boolean optional" 这样的类？

我试过这个：

.boolean optional {CSS}

.boolean_optional {CSS}

【问题讨论】：

这实际上是两个不同的类。
您的第一个选择器采用 optional 元素中的 class="boolean" 元素。您的第二个选择器采用 class="boolean_optional" 的元素。

【解决方案1】：

正如 Zepplock 所说，这实际上是一个属性中的两个类：boolean 和 optional。空格不是类名的一部分；它充当分隔符。

这三个选择器都会匹配它：

.boolean
.optional
.boolean.optional

最后一个选择器只选择这个元素，因为它有两个类。

你从不在链接类选择器时包含空格，甚至像这样：

.boolean .optional

这样会选择包含在单独的 .boolean 元素中的 .optional 元素。

【讨论】：

【解决方案2】：

那些不是带空格的类 :) 它们被称为多类选择器。

您基本上只需要确保所有类名都连接起来（它们之间没有空格）并用点分隔。

.boolean.optional {

}

【讨论】：

【解决方案3】：

类的名字中永远不会有空格。在您的示例中，这实际上是两个类； boolean 和 optional。

要将样式应用于具有这两个类的元素，构造是

.boolean.optional {
 /* CSS */
}

但是，众所周知，IE6 对此存在一些问题。有关已知怪癖的更多详细信息，请参阅this link。

【讨论】：

【解决方案4】：

空格在类名中无效。 class="boolean optional" 表示该元素具有类boolean 和 optional，因此您可以将其与.boolean、.optional 匹配，或者如果您只想匹配两者的对象可选和布尔值，带有.boolean.optional。

【讨论】：

【解决方案5】：

我很欣赏这是不久前的事，但如果有人感兴趣，我还发现很方便的是，如何在具有两个类的元素中定位/选择一个元素...... 示例

.boolean.optional > p {
    color: red;
}

也许不需要解释，但是：仅在两个类都存在的元素内部将“段落文本变为红色”，即 .boolean 和 .optional

【讨论】：