空格是后代组合器，要求右侧元素位于左侧元素DOM子树中且不关心嵌套层级；>是子组合器，仅匹配直接子元素。二者性能、稳定性及适用场景不同，选择取决于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; }
<ul class="list">
<li>✅ 直接子元素</li>
<div><li>❌ 被 div 包裹，不匹配</li></div>
</ul>
- 适用场景：需要精准控制层级边界时，比如重置
ul的默认padding，但不想影响嵌套的子列表 - 性能优势：只需检查父元素的
immediate children，比空格快，尤其在大量节点渲染时更稳定 - 结构敏感：HTML 一改，样式就断——这既是缺点也是优点，能帮你及早发现 DOM 层级设计问题
拼接字符串或预处理器里多一个空格就翻车
空格是“最不显眼却最易出错”的符号之一，尤其在动态构造选择器时：
- 多空格、换行、制表符等空白字符，在 CSS 解析时都会被等价为单个空格——
.a \t .b和.a .b效果完全一样 - 误把空格当连接符：比如想写类名组合
.btn-primary，却写成.btn .primary，结果变成找.primary元素在.btn里面，而不是一个叫btn-primary的类 - SCSS/Less 中，
&符号后如果加了空格，比如& .icon，生成的就是后代选择器；而&.icon是修饰自身——差一个空格，含义天壤之别
选哪个不看“习惯”，要看 HTML 是否稳定
空格和 > 的兼容性没区别，所有现代浏览器和 IE8+ 都支持。真正决定用哪个的，是你的 HTML 结构预期是否可控：
- 如果组件封装强、DOM 层级固定（比如自研 UI 库的内部结构），优先用
>—— 更精确、性能好、不易污染 - 如果要适配第三方内容（如 CMS 输出的富文本、用户编辑的 HTML），用空格更鲁棒，但得配合更具体的选择器前缀来收窄范围，比如
.content > p:first-child比单纯.content p更安全 - 别在同一个规则里混用：比如
.parent > .child .grand，这种写法既没获得>的精确性，又保留了空格的穿透力，反而最难维护
最常被忽略的点是：空格带来的“宽泛匹配”在开发期看不出问题，上线后一旦内容结构变化，样式会悄无声息地扩散到不该出现的地方，排查成本远高于写的时候多敲几个字符。
