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

在 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 样式至关重要。 通过选择正确的选择器，可以避免不必要的样式应用，并提高网站的性能。