css后代选择器和子元素选择器的区别

后代选择器匹配任意深度的嵌套后代，子元素选择器仅匹配直接子元素；前者用空格分隔（如div p），后者用>分隔（如div>p），性能与精度要求决定选用。

后代选择器和子元素选择器都用来匹配嵌套结构中的元素，但它们的嵌套层级要求不同：后代选择器不关心中间隔了几层，子元素选择器只认直接父子关系。

后代选择器（空格分隔）

用空格连接两个选择器，表示“某个元素内部任意深度的指定后代”。只要目标元素在祖先元素的DOM树中处于其下方（不管隔几层），就会被选中。

• 写法示例： div p —— 选中所有在 div 元素内部的 p 元素，包括 div > section > article > p 这种嵌套很深的情况
• 即使中间隔着多个其他元素、文本节点或注释，只要路径存在，就匹配
• 性能上略低一点，浏览器需要向上遍历整个祖先链来确认关系

子元素选择器（> 符号）

用大于号 > 连接，表示“紧挨着的下一级子元素”，只匹配父元素的**直接子元素**，不跨层。

• 写法示例： div > p —— 只选中那些父节点**正好是** div 的 p 元素，比如

  xxx

• xxx

  中的 p 不会被 div > p 匹配
• 更精确、性能稍好，适合需要严格控制层级的场景（如组件封装、避免样式穿透）

容易混淆的实际例子

看这段HTML：

  
第一段
  

    
第二段
  
  
    

      
第三段