在 CSS 中，相邻兄弟选择器、后代选择器和子选择器都是用来选择特定 HTML 元素的，但它们选择的目标元素和选择方式有所不同：
-
子选择器（
>）: 只选择作为指定父元素直接子元素的元素。换句话说，它只选择父元素的第一级子元素，不会选择更深层次的子孙元素。<div><p>This paragraph is a direct child.</p> <!-- 会被选中 --><section><p>This paragraph is a grandchild, not a direct child.</p> <!-- 不会被选中 --></section> </div>div > p { color: blue; } -
后代选择器（空格）: 选择指定元素的所有后代元素，无论它们嵌套的层级有多深。只要是指定元素内部的元素，都会被选中。
<div><p>This paragraph is a descendant.</p> <!-- 会被选中 --><section><p>This paragraph is also a descendant.</p> <!-- 也会被选中 --></section> </div>div p { color: green; } -
相邻兄弟选择器（
+）: 选择紧跟在指定元素后的第一个兄弟元素。这两个元素必须拥有相同的父元素，并且被选择的元素必须直接跟在指定元素之后。<div><p>First paragraph.</p><p>Second paragraph (adjacent sibling).</p> <!-- 会被选中 --><p>Third paragraph.</p> <!-- 不会被选中 --> </div>p + p { color: red; }
总结：
| 选择器 | 符号 | 选择目标 |
|---|---|---|
| 子选择器 | > |
直接子元素 |
| 后代选择器 | 空格 | 所有后代元素 |
| 相邻兄弟选择器 | + |
紧跟其后的第一个兄弟元素 |
理解这些选择器的区别对于编写高效、精准的 CSS 样式至关重要。 通过选择正确的选择器，可以避免不必要的样式应用，并提高网站的性能。
