CSS 组合选择器

CSS 组合选择器（Combinators）定义了选择器之间的关系，使开发者能够基于文档的 DOM 结构精确地定位元素。

通过使用特定的符号，我们可以高效地控制元素的样式继承与层级关系，从而避免为每个元素分配过多的类名。

1. 后代选择器 (Descendant Combinator)

后代选择器使用空格（ ）作为连接符，用于选取指定元素内部的所有后代元素，无论嵌套层级有多深。

• 语法：A B { ... }
• 作用：选中所有 A 元素内部的 B 元素。

/* 选中 div 内所有的 p 标签，无论嵌套多深 */
div p {
  color: blue;
}

2. 子元素选择器 (Child Combinator)

子元素选择器使用大于号（>）作为连接符，仅选取指定元素的直接子级。它不会影响孙子级或更深层级的元素。

• 语法：A > B { ... }
• 作用：仅选中 A 的第一层子代 B。

/* 仅选中 div 下的第一层 p 标签 */
div > p {
  font-weight: bold;
}

3. 相邻兄弟选择器 (Adjacent Sibling Combinator)

相邻兄弟选择器使用加号（+）作为连接符，用于选取紧跟在指定元素之后的第一个兄弟元素。如果该元素之后没有对应的兄弟元素，则不会产生作用。

• 语法：A + B { ... }
• 作用：选中紧随 A 之后的第一个同级 B 元素。

/* 选中紧跟在 h1 后面的第一个 p 标签 */
h1 + p {
  margin-top: 0;
}

4. 通用兄弟选择器 (General Sibling Combinator)

通用兄弟选择器使用波浪号（~）作为连接符，用于选取指定元素之后的所有兄弟元素（无论中间隔了多少其他元素）。

• 语法：A ~ B { ... }
• 作用：选中 A 之后出现的所有同级 B 元素。

/* 选中 h1 之后所有的 p 标签 */
h1 ~ p {
  color: gray;
}

5. 核心差异总结表

6. 开发最佳实践

• 性能考量：虽然浏览器对选择器的解析性能优化极佳，但避免过深的组合（如 div ul li a span）可以提高 CSS 的可读性和后期维护效率。
• 优先级管理：组合选择器会增加选择器的权重（Specificity）。在使用复杂选择器时，若发现样式未生效，请优先检查是否被权重更高的 ID 或类选择器覆盖。
• 语义化优于嵌套：尽可能利用类名（Class）来定位元素，而不是过度依赖复杂的层级关系。复杂的组合选择器如果 DOM 结构发生微调，极易失效。
• 谨慎使用相邻选择器：+ 选择器非常适合用于处理布局间距（例如 button + button { margin-left: 10px; }），这比为每一个按钮手动添加类名要优雅得多。