Html 如何选择带有空格的类

如何选择像

class=“boolean optional”

这样的类

我试过这个：

.boolean optional {CSS}

.boolean_optional {CSS}

---

正如Zepplock所说，在一个属性中实际上有两个类：

boolean

和

optional

。空格不是类名的一部分；它充当分离器

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

.boolean
.optional
.boolean.optional

最后一个选择器仅拾取此元素，因为它同时具有两个类

链接类选择器时从不包含空格，即使是这样：

.boolean .optional

---

这将选择包含在单独的

.boolean

元素中的

.optional

元素。

这些元素不是带空格的类：），它们称为多类选择器

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

.boolean.optional {

}

---

空格在类名中无效

class=“boolean optional”

表示元素具有类

boolean

和

optional

，因此您可以将其与

.boolean

、

.optional

匹配，或者如果您只想匹配可选和布尔对象，使用

.boolean.optional

类的名称中实际上永远不会有空格。在您的示例中，这实际上是两个类<代码>布尔值和

可选

若要将样式应用于同时具有这两个类的元素，请

.boolean.optional {
 /* CSS */
}

---

然而，IE6在这方面存在一些问题。有关已知怪癖的更多详细信息，请参阅。

我知道这是很久以前的事了，但如果有人感兴趣，我发现很方便的一点是，如何在同时具有两个类的元素中定位/选择一个元素。。。 范例

---

可能不需要解释，但：仅当两个类都存在的元素（即.boolean和.optional）的段落内部，才将“段落文本”变为红色。这两个类实际上是两个不同的类。您的第一个选择器在元素中使用

optional

元素。您的第二个选择器使用

class=“boolean\u optional”

获取元素。在IE6中，

.boolean.optional

等同于

.optional

，请参阅

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