子代选择器>能阻断样式污染，因为它强制只匹配直接子元素，天然切断后代继承链，如.menu > .submenu绝不会命中深层嵌套的同名元素，而空格后代选择器会层层穿透导致越界；其匹配严格依赖dom结构，不因文本节点或注释干扰，是css原生唯一能物理隔离层级的机制。
子代选择器 > 为什么能阻断样式污染
因为 > 强制限定“只匹配直接子元素”，天然切断了后代继承链。比如 .menu > .submenu 永远不会命中 .menu > .submenu > .submenu 里的内层元素——哪怕它们 class 名完全一样。
常见错误是误用空格（后代选择器）：.menu .submenu 会层层穿透，导致二级、三级菜单全被改写；而 > 是唯一能物理隔离层级的 CSS 原生机制。
- 浏览器匹配时，
>要求父元素必须是上一选择器的**直接父节点**，中间不能跳过任何层级 - 它不依赖 class 或 id 的唯一性，只认 DOM 树结构，所以即使嵌套中混入无 class 的
div或span，也不影响判断 - 和
:scope配合使用时（如.menu:scope > .submenu），作用域更明确，适合组件化场景
WordPress 多级菜单中 .sub-menu 类名重复怎么办
WordPress 默认给所有子菜单都加 .sub-menu，导致一级下拉、二级下拉样式无法区分。靠改 PHP 输出或 JS 注入类名不现实，纯 CSS 解法就是靠层级锚定。
正确写法是把容器 ID 或顶层菜单 class 当作根锚点，再用 > 逐级收口：
#primary-menu > .sub-menu { /* 一级下拉菜单 */ }
#primary-menu > .sub-menu > .sub-menu { /* 二级下拉菜单 */ }
#primary-menu > .sub-menu > .sub-menu > .sub-menu { /* 三级下拉菜单 */ }
- 注意：WordPress 生成的 HTML 中，
.sub-menu总是紧跟在对应<li>后面，且是其直接子元素，所以>能稳稳命中 - 不要写成
#primary-menu .sub-menu .sub-menu，那会匹配任意深度的嵌套，彻底失去控制 - 如果某层菜单需要特殊定位（比如二级菜单右出、三级菜单左出），就只改对应层级的
left/right值，互不干扰
嵌套 <ol></ol> 列表编号样式错乱的修复方法
HTML 中 <ol></ol> 嵌套时，若用 ol { list-style: upper-roman; }，所有层级都会变成罗马数字。想让第一层用罗马、第二层用字母、第三层用数字，必须靠 > 切断继承。
关键点在于：浏览器对 list-style 的继承是隐式的，但 > 能强制重置每一层：
#outline > ol { list-style: upper-roman; }
#outline > ol > li > ol { list-style: upper-alpha; }
#outline > ol > li > ol > li > ol { list-style: decimal; }
- 这里不能写
#outline ol，否则第二层ol会被外层规则覆盖（CSS 权重相同，后声明者胜） - 路径必须严格匹配 DOM 结构：WordPress 或静态生成器可能在
<li>和内层<ol></ol>之间插入换行符或空格文本节点，但>只认元素节点，不受影响 - 如果编号仍不对，检查是否被 UA 样式（如 Chrome 默认
ol的margin）干扰，优先重置margin和padding
什么时候不该用 >？两个典型踩坑场景
> 很强，但不是万能。两个容易翻车的地方：
-
中间有匿名文本节点或注释：比如
<div class="parent">Text<span>child</span> </div>，.parent > span能匹配，但.parent > span在Text<!-- comment --><span></span>场景下依然有效——因为注释和文本节点不算“元素”，>只跳过非元素节点，这点常被误解 -
动态插入内容没走 DOM 正确路径：React/Vue 渲染时若用
Fragment或v-for直接输出多个<li>，父容器里可能没有包裹的<ul></ul>，导致.menu > li失效——此时得退回到.menu li，再靠其他条件（如:first-child）补位
真正难的不是写出 >，而是确认目标元素在当前 DOM 中是否真处于你写的那个“直接子”位置。打开 DevTools 逐层折叠父节点，比查文档更快验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
