后代选择器（空格）因穿透任意深度匹配祖先链中目标元素，导致样式污染；而子选择器（>）仅匹配直接子元素，可物理隔离层级，避免错位，是更安全的选择。
后代选择器（空格）会穿透任意深度匹配，只要目标元素在祖先链中，不管隔几层都会生效——这是它导致样式污染的根本原因。
后代选择器 .menu .submenu 为什么比 .menu > .submenu 更危险
它不校验层级关系，只检查“是否在某个祖先内部”。比如 .menu .submenu 会同时命中：
-
<div class="menu"><div class="submenu"></div></div>（一级下拉） -
<div class="menu"><div class="submenu"><div class="submenu"></div></div></div>（二级下拉） -
<div class="menu"><div class="submenu"><div class="submenu"><div class="submenu"></div></div></div></div>（三级甚至更深）
一旦你只写了一条 .menu .submenu { top: 100% }，所有嵌套层级的 .submenu 都会被强制定位到同一位置，菜单完全错位。
而 .menu > .submenu 只匹配直接子元素，天然阻断穿透，是唯一靠 CSS 原生机制就能物理隔离层级的方式。
立即学习“前端免费学习笔记（深入）”；
WordPress 或 CMS 生成的多级菜单里，.sub-menu 类名重复怎么办
WordPress 默认给每一级子菜单都加 .sub-menu，但 DOM 结构是严格的父子嵌套：<li><ul class="sub-menu"></ul></li> → 下一层又是 <li><ul class="sub-menu"></ul></li>。这时必须用 > 锚定层级：
-
#primary-menu > .sub-menu：只控制一级下拉（<ul class="sub-menu"></ul>是#primary-menu的直接子） -
#primary-menu > .sub-menu > .sub-menu：只控制二级下拉（内层.sub-menu是外层.sub-menu的直接子） - 绝不能写
#primary-menu .sub-menu .sub-menu——它会把所有深层.sub-menu全部拉平处理
浏览器匹配时，> 要求中间不能插入任何其他元素，哪怕是个文本节点或注释也不行，所以结构稳定、结果可预期。
用 :scope 配合 > 可以让作用域更干净
当组件结构动态变化，或者你想明确“从当前元素开始算起”，:scope 就很有用。例如：
.search-form:scope > .search-input
等价于“当前元素是 .search-form，且目标是它的直接子 .search-input”。它比 .search-form .search-input 更安全，因为不会被外部同名父容器干扰。
注意：:scope 在 Firefox 和现代 Chrome/Edge 中支持良好，但 Safari 15.4+ 才完全支持，旧版需 fallback。
真正容易被忽略的是：后代选择器的“穿透性”不是 bug，是设计使然；但开发者常误把它当“方便”，却没意识到它把样式控制权交给了整个 DOM 树的任意变动——哪怕只是某处多套了一层 <div>，就足以让原本正常的样式彻底失效。</div>
