子选择器 > 的写法和生效条件
子选择器只匹配**父元素的直接子元素**，不穿透嵌套层级。很多人写了 ul > li 却发现样式没生效，大概率是 HTML 结构里 li 并非 ul 的直接子节点——比如中间夹了 div 或 section。
必须满足两个条件才触发：父元素选择器能精准定位到“真实父级”，且目标元素确实位于其下一级（不能隔层）。
-
nav > a只作用于<nav><a>...</a></nav>，对<nav><div><a>...</a></div></nav>无效 - 空格和
>完全不同：ul li是后代选择器，ul > li才是子选择器 - HTML 中换行、缩进、注释不会影响 DOM 层级，别被格式误导
常见误用：为什么 > 看似没反应
最常踩的坑是把语义父级当成了结构父级。比如用 CSS 框架时，.card 内部可能套了一层 div.card-body，这时 .card > p 就选不到任何内容——因为 p 的真实父级是 .card-body，不是 .card。
- 用浏览器开发者工具检查元素，右键「Reveal in Elements panel」，看高亮的父节点是不是你写的那个
- 如果不确定层级，先用后代选择器
.card p测试是否能命中，再逐步收紧为.card > .card-body > p -
>对伪元素、文本节点无效——它只匹配真实 HTML 元素节点
和 :scope 搭配使用更可控
在 JavaScript 动态插入或 scoped 样式场景下，:scope > xxx 能明确锚定当前作用域起点，比纯 CSS 子选择器更可靠。
立即学习“前端免费学习笔记（深入）”；
例如在 Shadow DOM 或 document.querySelector('.container').querySelectorAll(':scope > div') 中，:scope 指向调用者本身，避免因外层样式污染导致意外匹配。
-
:scope > [data-role="item"]在组件封装时比硬写父类名更健壮 - 注意兼容性：
:scope在 Safari 15.4+ 和 Chrome 100+ 才稳定支持，旧项目慎用 - 它不解决层级误判问题，但能帮你把“父级”从 CSS 类名约束转为 JS 运行时对象，减少歧义
替代方案：什么时候不该硬用 >
如果目标元素的父级本身没有稳定 class 或 tag，或者结构经常变动，强行用子选择器反而让维护成本飙升。这时候该考虑别的路径。
- 给关键容器加唯一
data-属性，比如data-list="main"，然后用[data-list="main"] > li - 用属性选择器兜底：
ul[role="list"] > li比单纯ul > li更具语义鲁棒性 - 遇到多层嵌套又必须精确控制时，宁可多加一个 class，也别靠猜层级——CSS 不是 DOM 查询语言
真正难的不是写对 >，而是判断这个“直接子”在业务逻辑里是否真的稳定存在。一旦父级结构由 JS 动态生成或受第三方库干预，子选择器就容易失效——这点比语法本身更值得花时间确认。
