后代选择器（空格）因穿透任意深度匹配祖先链中目标元素，导致样式污染；而子选择器（>）仅匹配直接子元素，可物理隔离层级，避免错位，是更安全的选择。
后代选择器（空格）会穿透任意深度匹配，只要目标元素在祖先链中，不管隔几层都会生效——这是它导致样式污染的根本原因。
后代选择器 .menu .submenu 为什么比 .menu > .submenu 更危险
它不校验层级关系，只检查“是否在某个祖先内部”。比如 .menu .submenu 会同时命中：
-
（一级下拉） -
（二级下拉） -
（三级甚至更深）
一旦你只写了一条 .menu .submenu { top: 100% }，所有嵌套层级的 .submenu 都会被强制定位到同一位置，菜单完全错位。
而 .menu > .submenu 只匹配直接子元素，天然阻断穿透，是唯一靠 CSS 原生机制就能物理隔离层级的方式。
WordPress 或 CMS 生成的多级菜单里，.sub-menu 类名重复怎么办
WordPress 默认给每一级子菜单都加 .sub-menu，但 DOM 结构是严格的父子嵌套：> 锚定层级：
-
#primary-menu > .sub-menu：只控制一级下拉（是#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 树的任意变动——哪怕只是某处多套了一层 ，就足以让原本正常的样式彻底失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
