后代选择器匹配任意深度的嵌套后代，子元素选择器仅匹配直接子元素；前者用空格分隔（如div p），后者用>分隔（如div>p），性能与精度要求决定选用。
后代选择器和子元素选择器都用来匹配嵌套结构中的元素，但它们的嵌套层级要求不同：后代选择器不关心中间隔了几层，子元素选择器只认直接父子关系。
后代选择器（空格分隔）
用空格连接两个选择器，表示“某个元素内部任意深度的指定后代”。只要目标元素在祖先元素的DOM树中处于其下方（不管隔几层），就会被选中。
-
写法示例：
div p—— 选中所有在div元素内部的p元素，包括div > section > article > p这种嵌套很深的情况 - 即使中间隔着多个其他元素、文本节点或注释，只要路径存在，就匹配
- 性能上略低一点，浏览器需要向上遍历整个祖先链来确认关系
子元素选择器（> 符号）
用大于号 > 连接，表示“紧挨着的下一级子元素”，只匹配父元素的**直接子元素**，不跨层。
-
写法示例：
div > p—— 只选中那些父节点**正好是**div的p元素，比如<div> <p>xxx</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill9972" title="Wechat Article Html"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="Wechat Article Html" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill9972" title="Wechat Article Html">Wechat Article Html</a> <p>将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。</p> </div> <a href="/xiazai/skill9972" title="Wechat Article Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> </div> -
<div><section><p>xxx</p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</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会选中“第二段”（需逐级严格匹配）
基本上就这些。选哪个，关键看你是否允许中间插层——要宽松匹配用空格，要精准控制用 >。
