空格表示后代选择器，匹配任意嵌套层级的后代元素；>表示子选择器，仅匹配直接子元素。二者语义、性能及稳定性不同：空格穿透力强但易误伤，>更精确且性能更优，需依html结构稳定性与样式控制需求谨慎选用。
空格表示任意层级的后代关系
空格在 CSS 选择器里不是“可有可无的分隔符”，而是明确的后代组合器（descendant combinator），它要求右侧元素必须位于左侧元素的 DOM 子树中，但不关心中间隔了几层。
常见错误现象：.nav ul li a 看着像“导航→ul→li→a”的线性路径，实际只要 a 是某个 li 的后代、该 li 是某个 ul 的后代、该 ul 在 .nav 内——哪怕中间插了 div、section 或 article，照样匹配。
- 适用场景：统一设置某区域所有特定类型元素的样式，比如
.article p给正文里所有段落加行高 - 性能影响：浏览器需向上遍历祖先链判断是否属于目标祖先，嵌套越深、节点越多，开销越大
- 稳定性风险：DOM 结构微调（比如加一层 wrapper）不会打断匹配，但容易“误中副车”——本想只改顶层列表项，结果连子菜单里的文字也变了
> 符号表示严格的直接子关系
> 是子组合器（child combinator），它只认“父-子”这一层，跳过所有间接后代。语义上更接近“紧贴着下一级”的物理位置。
典型失效场景：.list > li 在如下结构中只会命中第一个 li，第二个被 div 包裹的 li 完全无视：
.list > li { background: #eee; }
- ✅ 直接子元素
- ❌ 被 div 包裹，不匹配
- 适用场景：需要精准控制层级边界时，比如重置
ul的默认 padding，但不想影响嵌套的子列表 - 性能优势：只需检查父元素的 immediate children，比空格快，尤其在大量节点渲染时更稳定
- 结构敏感：HTML 一改，样式就断——这既是缺点也是优点，能帮你及早发现 DOM 层级设计问题
为什么不能靠经验猜，而要显式选
空格和 > 的行为差异在简单结构里看不出来，但一旦组件开始复用、嵌套变深、第三方组件插入 DOM，区别立刻暴露。比如 .card .title 可能意外命中卡片内部某个弹窗里的 .title，而 .card > .title 就只锁定卡片顶层标题。
- 不要因为“现在看起来都一样”就混用；写的时候就要想清楚：这个样式是意图作用于“整个区域内的所有目标”，还是“仅限第一层”
- 团队协作时，
>更易维护——别人一眼看出你不想让它穿透到深层 - 现代框架（React/Vue）生成的 DOM 常含不可见 wrapper 元素，空格选择器更容易“越界”，
>则天然免疫这类干扰
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
