CSS 群组选择器

CSS 群组选择器语法

在 CSS 中，群组选择器可以让你将多个选择器分组，然后对这几个选择器进行相同的操作。群组选择器可以减少重复的 CSS 代码，提高代码的可维护性。

语法：

选择器1, 选择器2, ..., 选择器N {
    ……
}

说明：

对于群组选择器，选择器之间必须要用英文逗号（,）隔开，不然群组选择器就无法生效。

css 群组选择器

需要注意的是，“群组选择器” 与 “组合选择器” 是两种不同的选择器，它们之间的区别如下：

群组选择器（Grouping Selector）：用于对多个不同的选择器应用同一组样式声明。它的目的是为了简化代码，避免编写重复的样式代码。
组合选择器（Combinator Selector）：用于根据元素之间的关系（比如父子关系、兄弟关系等）来选择元素。组合选择器只有 4 种：后代选择器、子代选择器、相邻兄弟选择器、通用兄弟选择器。

提示: 在群组选择器中，每个被逗号分隔的选择器都是独立的。也就是说，即使某一个选择器无效，但其他选择器仍然有效。

CSS 群组选择器示例

接下来，我们通过几个简单的例子来讲解 CSS 如何使用群组选择器来定义样式。

示例 1：使用 CSS 群组选择器

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        h3, div, p, span { color: red; }
    </style>
</head>
<body>
    <h3>绿叶网</h3>
    <div>绿叶网</div>
    <p>绿叶网</p>
    <span>绿叶网</span>
</body>
</html>

页面效果如下图所示。

CSS 群组选择器的基本用法

分析：

h3, div, p, span { color: red; } 表示选中所有的 h3 元素、div 元素、p 元素和 span 元素，并将它们的文本颜色设置为红色。下面 2 种方式是等价的：

<!-- 方式 1-->
<style>
    h3, div, p, span { color: red; }
</style>

<!-- 方式 2-->
<style>
    h3 { color: red; }
    div { color: red; }
    p { color: red; }
    span { color: red; }
</style>

示例 2：CSS 群组选择器的应用

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #lvye, .title, span { color: red; }
    </style>
</head>
<body>
    <div id="lvye">绿叶网</div>
    <div>绿叶网</div>
    <p>绿叶网</p>
    <p class="title">绿叶网</p>
    <span>绿叶网</span>
</body>
</html>

页面效果如下图所示。

CSS 群组选择器的应用

分析：

#lvye,.title,span{……} 表示选中 id 为 lvye 的元素、class 为 title 的元素以及所有的 span 元素。下面 2 种方式是等价的：

<!-- 方式 1-->
<style>
    #lvye, .title, span { color: red; }
</style>

<!-- 方式 2-->
<style>
    #lvye { color: red; }
    .title { color: red; }
    span { color: red; }
</style>

从上面两个例子，我们可以看出 CSS 群组选择器的效率究竟有多高了吧！