CSS 多类选择器一个class值可以包含一个词列表

CSS中可以使用类选择器（class selector）来选中具有相同类名的元素，类名以“.”开头。而CSS多类选择器的使用方法可以让我们选中具有多个类名的元素。

语法

.class1.class2 {
  /* css 样式 */
}

多类选择器可以由多个类名组成，用点号分隔。在样式表中，类名之间不能有空格或其他字符。被选中的元素必须同时包含所有的类名才会受到样式的影响。

示例

假设现在需要选中所有同时具有类名 red 和 bold 的 span 元素。可以使用以下语法：

.red.bold {
  color: red;
  font-weight: bold;
}

这个多类选择器选中了同时具有类名 red 和 bold 的 span 元素，然后给它们设置了红色字体和粗体样式。如果在 HTML 中使用了以下元素：

<span class="red bold">Hello, World!</span>

那么这个 span 元素的文本就会显示为红色粗体。

除此之外，多类选择器也可以用来选择同一元素下的不同状态，例如 hover 和 active。以下是一个示例：

.btn.primary:hover {
  background-color: #008CBA;
  color: #fff;
}

在这个示例中，.btn 和 .primary 是共同的类名，:hover 表示鼠标移动到元素上时的状态。这个多类选择器选中所有同时具有 .btn 和 .primary 类名的元素，并在鼠标移动到它们上面时给它们设置深蓝色背景和白色字体的样式。

总结

多类选择器可以用来筛选出拥有多个共同类名的元素，最常见的用法就是选中特定类名组合的元素。同时，多类选择器的选项范围还包括其他状态，例如 hover 和 active，可以将多个共同的状态组合到同一选择器中。