CSS选择器：分组与嵌套详解
对于CSS初学者来说，理解选择器的使用方式是掌握CSS的关键。本指南将用通俗易懂的语言解释分组选择器和嵌套选择器的概念、用法和实际应用场景，帮助您更高效地编写CSS代码。
分组选择器
什么是分组选择器？
分组选择器允许您将多个选择器组合在一起，并为它们应用相同的样式规则。不用重复写相同的样式，只需用逗号分隔不同选择器。
/* 传统写法 – 代码重复 */
h1 { color: blue; }
h2 { color: blue; }
h3 { color: blue; }
/* 分组写法 – 简洁高效 */
h1, h2, h3 {
color: blue;
}
h1 { color: blue; }
h2 { color: blue; }
h3 { color: blue; }
/* 分组写法 – 简洁高效 */
h1, h2, h3 {
color: blue;
}
分组选择器的优点：
- 减少代码量 – 避免重复编写相同样式
- 提高可维护性 – 修改时只需改动一处
- 增强可读性 – 让CSS结构更清晰
- 提升性能 – 浏览器只需解析一次规则
实际效果展示：
标题1 – 应用了蓝色
标题2 – 应用了蓝色
标题3 – 应用了蓝色
注意： 分组时可以包含任何类型的选择器（类、ID、元素等），也可以与其他选择器组合使用。
嵌套选择器
什么是嵌套选择器？
嵌套选择器（也称为组合选择器）允许您根据元素在HTML中的位置关系来应用样式。通过组合多个简单选择器，可以更精确地选择目标元素。
后代选择器（空格）
选择指定元素内部的所有匹配后代元素
/* 选择所有在div内的p元素 */
div p {
color: green;
}
div p {
color: green;
}
示例效果：
这个段落会被选中（绿色）
这个嵌套段落也会被选中（绿色）
这个段落不会被选中（默认颜色）
子选择器（>）
只选择直接子元素，不包括更深层次的后代
/* 只选择div的直接子元素p */
div > p {
background: lightblue;
}
div > p {
background: lightblue;
}
示例效果：
这个段落是直接子元素（浅蓝背景）
这个嵌套段落不是直接子元素（无背景）
相邻兄弟选择器（+）
选择紧跟在指定元素后面的第一个兄弟元素
/* 选择紧跟在h2后面的段落 */
h2 + p {
font-weight: bold;
}
h2 + p {
font-weight: bold;
}
示例效果：
标题
这个段落紧跟在h2后面（加粗）
这个段落不是紧跟在h2后面（正常）
通用兄弟选择器（~）
选择指定元素后面的所有兄弟元素
/* 选择h2后面的所有段落 */
h2 ~ p {
color: purple;
}
h2 ~ p {
color: purple;
}
示例效果：
标题
这个段落是兄弟元素（紫色）
其他元素
这个段落也是兄弟元素（紫色）
分组与嵌套的联合使用
在实际项目中，分组和嵌套选择器常常组合使用，以创建更强大、更灵活的样式规则。
/* 组合使用示例 */
/* 所有标题和具有.highlight类的元素 */
h1, h2, h3, .highlight {
font-weight: bold;
}
/* 嵌套分组 */
/* 导航栏中的链接和按钮 */
nav a, nav button {
text-decoration: none;
padding: 8px 15px;
}
/* 复杂嵌套 */
/* 文章内所有段落和列表项，但不包括侧边栏 */
.main-content p,
.main-content li {
line-height: 1.8;
}
/* 所有标题和具有.highlight类的元素 */
h1, h2, h3, .highlight {
font-weight: bold;
}
/* 嵌套分组 */
/* 导航栏中的链接和按钮 */
nav a, nav button {
text-decoration: none;
padding: 8px 15px;
}
/* 复杂嵌套 */
/* 文章内所有段落和列表项，但不包括侧边栏 */
.main-content p,
.main-content li {
line-height: 1.8;
}
组合使用效果：
分组标题
分组元素
最佳实践建议：
- 使用分组减少重复代码，保持CSS精简
- 合理使用嵌套选择器，避免过度嵌套（一般不超过3层）
- 组合使用分组和嵌套提高代码可读性和可维护性
- 优先使用类选择器，避免过度依赖HTML结构
- 必要时添加注释说明复杂选择器的用途
重要提示：
CSS选择器的性能：ID选择器 > 类选择器 > 元素选择器。过于复杂的选择器会影响页面性能，应尽量避免多层嵌套和通配符滥用。