CSS 分组选择器

Begindev 编辑部 March 25, 2026

在 CSS 的世界里，选择器是你定位和美化网页上特定 HTML 元素的主要工具。我们已经探索了几种类型的选择器，包括元素选择器、类选择器、ID 选择器和属性选择器等。

现在，如果你想对多个不同的元素应用相同的样式，该怎么办？这就是分组选择器 (Grouping Selectors) 大显身手的时候了。这种技术不仅能节省你的时间和精力，还能让你的 CSS 代码更简洁、更易于维护。通过分组选择器，你可以编写同时适用于多个元素的 CSS 规则，从而简化样式表并改善其整体结构。

1. 理解分组选择器

分组选择器（也称为选择器列表）允许你将同一组 CSS 规则应用于多个 HTML 元素。你不需要为每个元素编写单独的规则，而是可以通过用逗号分隔选择器将它们合并为一个规则。这可以显著减少 CSS 中的冗余，并使管理整个网站的样式变得更加容易。

1.1 基本语法

selector1, selector2, selector3 {
  property: value;
  property: value;
}

在这里，selector1、selector2 和 selector3 可以是任何有效的 CSS 选择器，例如元素选择器、类选择器或 ID 选择器。花括号 {} 内的属性和值将应用于所有被选中的元素。

2. 分组选择器的基本示例

让我们用一个简单的例子来说明这个概念。假设你想将相同的字体和颜色应用于页面上的所有 <h1>、<h2> 和 <p> 元素。

如果不使用分组选择器，你会这样写：

h1 {
  font-family: Arial, sans-serif;
  color: #333;
}
h2 {
  font-family: Arial, sans-serif;
  color: #333;
}
p {
  font-family: Arial, sans-serif;
  color: #333;
}

使用分组选择器，你可以更高效地实现相同的结果：

h1, h2, p {
  font-family: Arial, sans-serif;
  color: #333;
}

这条单一的规则将指定的字体和颜色应用于所有 <h1>、<h2> 和 <p> 元素，使你的 CSS 更简洁、更易读。

3. 组合不同类型的选择器

分组选择器可以与任何类型的选择器组合使用。例如，你可以将元素选择器、类选择器和 ID 选择器组合在一起：

h1, .highlight, #main-title {
  text-align: center;
  margin-bottom: 20px;
}

在这个例子中，样式将应用于：

所有 <h1> 元素
所有带有 highlight 类的元素
ID 为 main-title 的元素

4. 优先级 (Specificity) 考量

使用分组选择器时，重要的是要记住，优先级仍然分别适用于组内的每个独立选择器。分组选择器的优先级由组内各个选择器决定，而不是由整个组决定。

例如，考虑以下 CSS：

p, #unique-paragraph {
  font-size: 16px;
}

在这种情况下，font-size: 16px; 声明将应用于所有 <p> 元素。但是，如果某个 <p> 元素同时也拥有 ID unique-paragraph，并且你在其他地方（或者甚至是同一个组内）为 #unique-paragraph 定义了不同的样式，ID 选择器的高优先级将起作用。

为了进一步说明，想象一下这个 HTML：

<p>这是一个普通段落。</p>
<p id="unique-paragraph" style="font-size: 20px;">这是一个独特的段落。</p>

即使 p 和 #unique-paragraph 的 font-size 都在分组选择器中定义为 16px，直接应用于 #unique-paragraph 元素的内联样式 font-size: 20px 仍将覆盖分组选择器的规则，因为内联样式具有最高的优先级。

5. 实战示例与演示

5.1 示例 1：设置导航链接样式

假设你有一个导航菜单，你想对其链接进行一致的样式设置。你可以使用分组选择器将相同的样式应用于所有链接状态：

nav a,
nav a:link,
nav a:visited {
  color: #007bff;
  text-decoration: none;
}

nav a:hover,
nav a:active {
  color: #0056b3;
  text-decoration: underline;
}

在这个例子中，我们分组了不同的伪类 (:link, :visited, :hover, :active) 来为不同状态下的导航链接应用一致的样式。

5.2 示例 2：标准化表单元素

表单通常包含各种元素，如 <input>、<textarea> 和 <button>。你可以使用分组选择器为这些元素应用通用的样式：

input[type="text"],
input[type="email"],
textarea,
button {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 10px;
  font-size: 16px;
}

button {
  background-color: #4CAF50;
  color: white;
  cursor: pointer;
}

这个例子分组了不同类型的表单元素，并应用了一致的内边距、边框和字体大小。然后，button 选择器用于为按钮元素应用特定的样式，覆盖通用样式（如有必要）。这演示了分组如何建立基准，同时允许特定的调整。

5.3 示例 3：高亮重要文本

想象一下，你想在整个网站中使用 <strong> 和 <em> 标签一致地高亮显示特定单词或短语。

strong, em {
  color: darkred;
  font-weight: bold; /* 对于 <em> 元素，这将有效地增强其突出显示效果 */
}

这段 CSS 将用相同的颜色和字重来设置 <strong> 和 <em> 元素的样式，使它们在视觉上突出，而无需重复样式声明。

6. 反例：何时不使用分组选择器

虽然分组选择器很有益，但在某些情况下它们并不是最佳方法。如果你定位的元素具有显著不同的样式，最好为每个元素定义单独的规则。过度使用分组选择器可能导致难以覆盖或维护的过于笼统的样式。

例如，考虑尝试将 <h1> 标签与 <button> 元素分组以进行样式设置：

h1, button {
  /* 这些样式对于两者来说可能并不都有意义 */
  font-size: 2em;
  padding: 0.5em;
  border-radius: 5px;
}

在这种情况下，初始的分组规则可能会产生令人困惑或不受欢迎的效果，迫使你稍后不得不分别为每个元素覆盖样式。从一开始就为 h1 和 button 定义单独的规则会更清晰、更易于维护。