子选择器（>）仅匹配直接子元素，即父元素的第一层子节点；后代选择器（空格）匹配任意深度的后代元素。两者在嵌套结构、性能及适用场景上存在显著差异。
child 选择器（>）只匹配直接子元素
它要求目标元素必须是父元素的**第一层子节点**，中间不能隔任何层级。比如 ul > li 只会选中 ，不会选中 。
常见误用场景：想给导航菜单项加样式，但菜单结构里用了 只要目标元素在祖先元素的 DOM 树路径中，无论嵌套多深，都会被匹配。例如 性能影响：深层嵌套时，浏览器需遍历整棵子树查找匹配项，比 立即学习“前端免费学习笔记（深入）”； 典型用途： 以下结构中，
后代元素（非直接子）
注意： 优先用 优先用空格的情况： 真正难处理的是那些「看起来像子元素，其实是 Fragment 或条件渲染插入的节点」——React/Vue 中的 包了一层，结果样式失效——大概率是误用了 > 而不是空格。descendant 选择器（空格）匹配任意后代元素
ul li 会选中 ，包括 。> 略慢；不过现代引擎优化较好，日常开发中差异几乎不可感知。
.modal p 统一设置段落行高）.theme-dark a）容易混淆的边界情况
div > span 和 div span 的匹配结果不同：div > span 只匹配第一个 ；div span 会匹配两个。> **不认文本节点或注释节点**。如果 div > span 仍能匹配——因为“文本”是文本节点，不影响父子关系判定；但若写成 什么时候该用哪个？
> 的情况：
）
.text-muted p）article em 让所有强调文本斜体） 或 可能导致预期中的「直接子」并不存在，这时靠 > 反而会断掉样式链。
