选择 CSS 中的所有类

在 CSS 中，选择器是用于选择 HTML 元素的规则。其中，类选择器（Class Selector） 是以 "." 开头的选择器，用于选择拥有特定类名的 HTML 元素。当需要对一组 HTML 元素应用相同的样式时，类选择器可以极大地简化 CSS 代码。

选择所有类

要选择 CSS 中的所有类，可以使用通配符选择器 * 加上类选择器 .。这种选择器将选中所有具有类属性的 HTML 元素。

/* 选择 css 中的所有类 */
*.
{
  /* 应用样式 */
}

然而，这种选择器可能过于宽泛，不利于 CSS 优化。因此，在实际应用中，可以根据需求精确选择类。

精确选择类

在 HTML 中，类名可以由多个单词组成，各单词之间使用短横线 - 连接，例如：

<div class="my-class">...</div>

在 CSS 中，可以使用多个类选择器来选中具有多个类名的 HTML 元素。

/* 选择同时拥有 my-class 和 other-class 两个类的元素 */
.my-class.other-class {
  /* 应用样式 */
}

也可以使用空格分隔的写法来选择同时拥有多个类的元素。

/* 选择同时拥有 my-class 和 other-class 两个类的元素 */
.my-class .other-class {
  /* 应用样式 */
}

如果需要选中所有具有某个类的 HTML 元素，可以使用如下写法。

/* 选择所有 class 属性包含 my-class 的元素 */
[class*="my-class"] {
  /* 应用样式 */
}

总结

在 CSS 中，类选择器用于选中具有特定类名的 HTML 元素。为了提高 CSS 选择器的效率，应该根据实际需求精确选择类。我们可以使用多个类选择器组合或者属性选择器来选取特定类的元素。