相邻兄弟选择器、后代选择器和子选择器三者有什么区别？

在 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; }