空格匹配“祖先–后代”关系，>匹配“父–子”关系；前者沿parentNode链向上查找任意匹配祖先，后者要求目标元素parentNode必须精确等于前一选择器所指元素。
空格和 > 渲染范围不同，根本原因在于它们匹配 DOM 树路径的方式完全不同：空格是“祖先–后代”关系，> 是“父–子”关系。这个差异不是浏览器“宽松”或“严格”的问题，而是 CSS 规范明确定义的语义边界。
空格匹配的是“向上可追溯的任意祖先”
写 .card p，浏览器对每个 p 元素执行的操作是：沿着 parentNode 链一直往上找，只要途中遇到一个匹配 .card 的祖先（不管隔了几层），就命中。它不关心中间有多少个 div、section 甚至文本节点。
- 常见错误现象：
.modal .close原本只想关掉右上角按钮，结果连弹窗内容里用户贴进去的<p class="close">xxx</p>也被误样式化了 - 性能影响：DOM 越深、节点越多，向上遍历成本越高；现代浏览器虽有优化，但在含数百个嵌套节点的富文本区域中仍可观测到轻微延迟
- 调试提示：在 DevTools 中右键目标元素 → “Reveal in Elements panel”，然后手动点开父级，确认你写的那个祖先是否真在路径上——别信直觉
> 只认“直接父节点”，中间插一个就断
.nav > a 要求每个匹配的 a 的 parentNode 必须**精确等于**那个被 .nav 选中的元素。哪怕中间只多一个 li 或一个 DocumentFragment（比如 JS 动态插入时没 append 到真实 DOM），就完全失效。
- 常见错误现象：下拉菜单用
.menu > li设样式，但二级菜单实际结构是<ul class="submenu"><li>...</li></ul>，而这个ul并非.menu直接子节点，所以li不生效 - Flexbox 场景下尤其关键：
align-self和order只对display: flex容器的**直接子元素**有效，必须用.flex-container > .item，写成.flex-container .item就是徒劳 - 注意语法细节：
.a>.b（无空格）是无效选择器；必须是.a > .b，空格不可省略
组合写法里空格和 > 的优先级不是并列的，而是嵌套的
像 .a > .b .c 这种写法，不是“同时满足 > 和空格”，而是按从左到右结合：先算 .a > .b 得到一组元素，再在这些元素内部找所有后代 .c。它等价于 (.a > .b) .c，不是 .a > (.b .c)。
立即学习“前端免费学习笔记（深入）”；
- 容易混淆的对比：
.a > .b .cvs.a .b > .c—— 前者要求.c在.a的直接子.b内部（任意深度），后者要求.c是.a内任意位置的.b的**直接子元素** - SCSS 中更易踩坑：
& > a编译为.nav > a，但若写成& .icon就变成.nav .icon（后代），差一个空格，含义翻盘 - 团队协作建议：用 Stylelint 开启
selector-descendant-combinator-spacing规则，强制空格规范，避免手抖漏格
真正难的不是记住规则，而是在写每一行选择器前，下意识问一句：我此刻需要的是“穿透结构”的宽容，还是“钉死层级”的控制？DOM 结构一旦由第三方库或 CMS 输出，就不再可控——这时候，一个空格，可能就是样式泄露的起点。
