空格在CSS选择器中表示后代关系，匹配任意嵌套层级的元素；而>仅匹配直接子元素，二者语义、性能及稳定性均不同，需依场景谨慎选用。
空格在CSS选择器里到底代表什么
它不是“随便写个空格就生效”，而是明确表示“后代关系”——只要中间隔着任意层级的嵌套，就能匹配。比如 .container .item 会选中所有在 .container 内部（无论几层深）的 .item 元素。
常见错误现象：.nav ul li a 看着像“导航里的 ul 里的 li 里的 a”，但实际只要 a 在任意嵌套深度的 li 下、而 li 又在任意深度的 ul 下、ul 又在 .nav 下，就全中——哪怕中间夹了 div、section 甚至 article。
为什么不能用空格代替 >（子选择器）
因为语义完全不同：> 只认“直接子元素”，空格认“任意后代”。这两个行为在 DOM 结构稍一变化时就会表现迥异。
-
.list > li：只匹配.list的**直系子li**，跳过.list > div > li -
.list li：匹配所有在.list内部的li，不管隔了几层 - 性能上，空格选择器需要向上遍历祖先链，浏览器优化再好也比
>多走几步；尤其在深层嵌套或大量节点时，重排重绘更敏感 - 兼容性没区别，所有现代浏览器和 IE8+ 都支持空格和
>
容易被忽略的空格陷阱
空格是“最不显眼却最易出错”的符号之一，尤其在拼接字符串生成选择器或动态构造样式时。
立即学习“前端免费学习笔记（深入）”；
- 多空格、换行、制表符等空白字符，在 CSS 解析时都会被等价为单个空格——
.a \t .b和.a .b效果完全一样 - 误把空格当连接符：比如想写类名组合
.btn-primary，却写成.btn .primary，结果变成找.primary元素在.btn里面，而不是一个叫btn-primary的类 - SCSS/Less 中，& 符号后如果加了空格，比如
& .icon，生成的就是后代选择器；而&.icon是修饰自身——差一个空格，含义天壤之别
什么时候该用空格，什么时候该避免
关键看你要控制的范围是否需要“穿透嵌套”。不是“越精确越好”，而是“够用且稳定”。
- 做组件封装时慎用空格：比如
.card .title，一旦用户在.card里套了个div再放.title，样式就失效了；改用.card > .title或给.title加data-属性更可控 - 全局工具类（如
.text-center）通常不依赖结构，不需要空格；但布局类如.grid .col就得靠空格实现跨层级对齐逻辑 - 调试时快速定位：浏览器开发者工具里看到高亮区域比预期大，第一反应该查是不是用了空格而非
>，尤其在用第三方 UI 库时，它们的 DOM 嵌套往往很深
真正难的不是记住空格的定义，而是每次写的时候都下意识问一句：这个空格，是我真需要它“穿透”，还是只是手滑按出来的？
