CSS 类选择器

Begindev 编辑部 March 25, 2026

类选择器根据你分配给它们的类 (class) 属性，将样式应用于特定的 HTML 元素。

这种有针对性的方法使你能够创建可复用的样式，并保持样式表整洁有序。与将样式应用于特定类型的所有元素（例如所有 <p> 标签）的元素选择器不同，类选择器提供了更细粒度的控制。它们允许你区分元素的外观，即使它们共享相同的 HTML 标签。本章将全面讲解类选择器，包括其语法、用法和最佳实践。

1. 理解类选择器

CSS 中的类选择器使用一个点号 (.) 后跟类名来定义。此选择器针对所有具有指定 class 属性的 HTML 元素。class 属性是全局属性，意味着它可以应用于任何 HTML 元素。

1.1 语法

.class-name {
  property: value;
  /* 更多 CSS 声明 */
}

1.2 示例

假设你有以下 HTML：

<p class="highlight">这个段落被高亮显示。</p>
<p>这个段落没有被高亮。</p>

以及以下 CSS：

.highlight {
  background-color: yellow;
  font-weight: bold;
}

在这种情况下，只有第一个段落会有黄色背景和粗体文本，因为它是唯一一个拥有 "highlight" 类的元素。第二个段落不受影响。

2. 应用多个类

类选择器的一个显著优势是，一个 HTML 元素可以被分配多个类。这允许你组合不同的样式并创建复杂的视觉效果。

HTML:

<div class="box highlight rounded">这是一个具有多种样式的盒子。</div>

CSS:

.box {
  width: 200px;
  height: 100px;
  background-color: lightblue;
  border: 1px solid black;
}
.highlight {
  background-color: yellow;
  font-weight: bold;
}
.rounded {
  border-radius: 10px;
}

在这个例子中，div 元素有三个类："box"、"highlight" 和 "rounded"。每个类都对元素的整体样式有所贡献。"box" 类定义了基本尺寸和背景，"highlight" 添加了黄色背景（覆盖了 box 的浅蓝色）和粗体文本，"rounded" 使角落变圆。这展示了如何通过组合类来创建可复用和模块化的样式。

3. 优先级 (Specificity) 与类选择器

优先级是 CSS 中的一个关键概念，它决定了当多个规则应用于同一个元素时，哪个样式规则优先。

类选择器的优先级高于元素选择器，但低于 ID 选择器。（我们将在下一章中探索 ID 选择器）。

考虑以下示例：

<p class="special-text">这是一个特殊的段落。</p>

p {
  color: blue; /* 元素选择器 */
}
.special-text {
  color: red; /* 类选择器 */
}

在这种情况下，段落将是红色的，因为类选择器 (.special-text) 的优先级高于元素选择器 (p)。如果还有一个内联样式（例如 <p style="color: green;">），它将覆盖类选择器和元素选择器，因为它具有最高的优先级。

4. 嵌套类选择器 (后代选择器)

类选择器可以嵌套在其他选择器中，以创建更具体的定位。这允许你仅在某个父元素内部，将样式应用于具有特定类的元素。

HTML:

<div class="container">
  <p class="text">这是容器内的段落。</p>
</div>
<p class="text">这是容器外的段落。</p>

CSS：

.container .text {
  color: green; /* 仅应用于 .container 内部的 .text */
}
.text {
  color: blue; /* 应用于所有 .text */
}

在这个例子中，位于 class="container" 的 div 内部的段落将是绿色的，而外部的段落将是蓝色的。这是因为 .container .text 选择器比单独的 .text 选择器更具体（优先级更高）。

5. 使用类选择器的最佳实践

使用描述性类名：选择清楚表明元素用途或功能的类名。避免使用 "style1" 或 "element2" 这样的通用名称。相反，选择像 "product-title"、"navigation-link" 或 "article-summary" 这样的名称。
遵循命名规范：坚持一致的命名规范，如 BEM (Block, Element, Modifier) 或 SMACSS，以维护组织良好且可维护的样式表。
避免过度具体：虽然嵌套选择器很有用，但要避免创建难以覆盖或复用的过度具体的选择器。尽量保持选择器简单明了。
优先考虑复用性：将类设计为可在多个元素和页面上复用。这将减少代码重复，使样式表更高效。

6. 实战示例与演示

6.1 示例 1：设置导航菜单样式

<nav>
  <ul>
    <li><a class="nav-link active" href="#">首页</a></li>
    <li><a class="nav-link" href="#">关于</a></li>
    <li><a class="nav-link" href="#">服务</a></li>
  </ul>
</nav>

.nav-link {
  display: inline-block;
  padding: 10px 20px;
  text-decoration: none;
  color: black;
}
.nav-link:hover {
  background-color: lightgray;
}
.nav-link.active {
  background-color: blue;
  color: white;
}

在此示例中，所有导航链接共享 .nav-link 类定义的基本样式。.active 类用于高亮当前选中的链接。注意 .nav-link.active 的用法（两个类名紧挨着），它针对同时拥有这两个类的元素。

6.2 示例 2：创建卡片布局

<div class="card">
  <img class="card-image" src="image.jpg" alt="卡片图片">
  <div class="card-body">
    <h2 class="card-title">卡片标题</h2>
    <p class="card-text">卡片内容...</p>
    <a class="card-button" href="#">阅读更多</a>
  </div>
</div>

.card {
  width: 300px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
/* ... 省略其他子元素样式 ... */
.card-button {
  display: inline-block;
  padding: 8px 15px;
  background-color: #007bff;
  color: white;
  border-radius: 3px;
}

这里，我们使用类选择器创建了一个可复用的卡片组件。这种模块化方法使得创建具有一致样式的多个卡片变得容易。

6.3 示例 3：设置表单元素样式

.form-group { margin-bottom: 15px; }
.form-control { width: 100%; padding: 8px; border: 1px solid #ccc; }
.btn { padding: 10px 20px; border: none; cursor: pointer; }
.btn-primary { background-color: #007bff; color: white; }

这个例子展示了如何使用类来标准化表单样式，如 .form-control 用于输入框，.btn 用于按钮基础样式，.btn-primary 用于特定颜色的按钮。