子选择器（>）仅匹配直接子元素，即父元素的第一层子节点；后代选择器（空格）匹配任意深度的后代元素。两者在嵌套结构、性能及适用场景上存在显著差异。
child 选择器（>）只匹配直接子元素
它要求目标元素必须是父元素的**第一层子节点**，中间不能隔任何层级。比如 ul > li 只会选中 <ul></ul> 下面**直接嵌套**的 <li>，不会选中 <ul><div><li></div></ul> 里的那个 <li>。
常见误用场景：想给导航菜单项加样式，但菜单结构里用了 <div> 或 <code><span></span> 包了一层，结果样式失效——大概率是误用了 > 而不是空格。
descendant 选择器（空格）匹配任意后代元素
只要目标元素在祖先元素的 DOM 树路径中，无论嵌套多深，都会被匹配。例如 ul li 会选中 <ul></ul> 内所有层级的 <li>，包括 <ul><li><ul><li></ul></li></ul> 中的内层 <li>。
性能影响：深层嵌套时，浏览器需遍历整棵子树查找匹配项，比 > 略慢；不过现代引擎优化较好，日常开发中差异几乎不可感知。
立即学习“前端免费学习笔记（深入）”；
典型用途：
根据项目规范生成 React 和 Vue 组件，包括 TypeScript 类型定义、Ant Design 5 集成、Tailwind CSS 样式及 Vitest 测试文件。当用户提出创建、生成或搭建前端组件的需求时启用，例如：“帮我写一个表格组件”、“生成一个弹窗”、“create a form component”、“写一个列表页”、“生成一个下拉选择器”。该能力在以下任一场景触发：涉及 React/TSX/Vue 组件生成、UI 组件创建，或为组件生成测试文件。
- 重置第三方组件样式（如
.modal p统一设置段落行高） - 主题化时批量覆盖子元素（
.theme-dark a）
容易混淆的边界情况
以下结构中，div > span 和 div span 的匹配结果不同：
<div>
<span>直接子元素</span>
<p>
<span>后代元素（非直接子）</span>
</p>
</div>div > span 只匹配第一个 <span></span>；div span 会匹配两个。
注意：> **不认文本节点或注释节点**。如果 <div>文本<span></span>
</div>，div > span 仍能匹配——因为“文本”是文本节点，不影响父子关系判定；但若写成 <div>
<!-- 注释 --><span></span>
</div>，也一样有效。
什么时候该用哪个？
优先用 > 的情况：
- 样式作用域需要严格限制（如避免影响嵌套的卡片组件内部的
<button></button>） - 使用 CSS-in-JS 或 Shadow DOM 时，显式表达层级意图更利于维护
优先用空格的情况：
- 通用工具类（如
.text-muted p） - 重置或继承样式（
article em让所有强调文本斜体） - 父容器结构不稳定，无法保证子元素是否被包装
真正难处理的是那些「看起来像子元素，其实是 Fragment 或条件渲染插入的节点」——React/Vue 中的 或 <template v-if></template> 可能导致预期中的「直接子」并不存在，这时靠 > 反而会断掉样式链。
