CSS 分组和嵌套

当多条规则想共享同一段样式、或想精准选中"某个元素里面的某类元素"时，就要用到分组选择器和嵌套选择器。它们是精简 CSS 代码、让样式贴合 HTML 结构的利器，几乎每个真实页面都离不开。

分组选择器

用英文逗号 , 把多个选择器连在一起，让它们共享同一条样式规则，避免重复书写大段代码：

h1, h2, h3 {
  color: #333;                  /* 三个标题同时生效 */
  font-family: "微软雅黑", sans-serif;
}
p, .intro, #footer {
  line-height: 1.6;             /* 不同类型的元素也能分组 */
}

嵌套选择器（后代）

用空格表示"后代"，选中某元素内部任意深度的匹配元素，是最常用的结构选择方式：

div p {
  color: blue;
}
/* 效果：div 内所有的 p 都变蓝，包括直接子级和更深的孙级 */

子元素选择器 >

只选中直接子元素，不向下穿透到孙级，用于精确控制一层结构：

ul > li {
  list-style: none;   /* 只作用于 ul 的直接 li 子级 */
}
/* 效果：<ul><li>一级</li><li>一级</li></ul> 中两层 li 均被去点 */

兄弟选择器 + 与 ~

相邻兄弟 + 选中紧随其后的一个元素；通用兄弟 ~ 选中其后的所有同级元素：

h2 + p { font-weight: bold; }   /* h2 后紧跟的第一个 p 加粗 */
h2 ~ p { color: gray; }         /* h2 之后的所有兄弟 p 变灰 */
/* 效果：同一父元素下，紧邻标题的段落加粗，其余兄弟段落变灰 */

与 class / id 组合使用

嵌套选择器常与 class、id 搭配形成"作用域"，让不同区域的相同标签各用各的样式：

.nav a { color: white; }         /* 只影响导航栏里的链接 */
.article a { color: #1565c0; }   /* 只影响正文里的链接 */
/* 效果：同是 a 标签，在导航里是白字，在正文里是蓝字 */

小结

逗号分组让一段样式一次定义、多处复用；空格后代、> 子元素、+ ~ 兄弟选择器则沿着 HTML 结构层层锁定目标；再与 class/id 配合，CSS 既精简又不会误伤页面其它元素。