后代选择器匹配任意深度的嵌套后代，子元素选择器仅匹配直接子元素；前者用空格分隔（如div p），后者用>分隔（如div>p），性能与精度要求决定选用。
后代选择器和子元素选择器都用来匹配嵌套结构中的元素，但它们的嵌套层级要求不同：后代选择器不关心中间隔了几层，子元素选择器只认直接父子关系。
后代选择器（空格分隔）
用空格连接两个选择器，表示“某个元素内部任意深度的指定后代”。只要目标元素在祖先元素的DOM树中处于其下方（不管隔几层），就会被选中。
-
写法示例：
div p—— 选中所有在div元素内部的p元素，包括div > section > article > p这种嵌套很深的情况 - 即使中间隔着多个其他元素、文本节点或注释，只要路径存在，就匹配
- 性能上略低一点，浏览器需要向上遍历整个祖先链来确认关系
子元素选择器（> 符号）
用大于号 > 连接，表示“紧挨着的下一级子元素”，只匹配父元素的**直接子元素**，不跨层。
-
写法示例：
div > p—— 只选中那些父节点**正好是**div的p元素，比如<div><p>xxx</p></div> -
<div><section><p>xxx</p></section></div>中的p不会被div > p匹配 - 更精确、性能稍好，适合需要严格控制层级的场景（如组件封装、避免样式穿透）
容易混淆的实际例子
看这段HTML：
立即学习“前端免费学习笔记（深入）”；
<div class="container">
<p>第一段</p>
<section>
<p>第二段</p>
</section>
<article>
<header>
<p>第三段</p>
</header>
</article>
</div>-
.container p会选中全部三段文字（后代选择器） -
.container > p只选中“第一段”（只有它是.container的直接子元素） -
.container > section > p会选中“第二段”（需逐级严格匹配）
基本上就这些。选哪个，关键看你是否允许中间插层——要宽松匹配用空格，要精准控制用 >。
