应使用子选择器“>”（如div > p）精确匹配直接子元素，而非后代选择器“ ”（如div p）；结构不确定时可用后代选择器但需接受层级不精确；:scope配合querySelector可运行时过滤子元素；:nth-child和:nth-of-type按DOM顺序计数，不按class筛选；属性选择器组合（如[role="listitem"].active）比标签名更稳定。
后代选择器怎么写才不会误选子元素
后代选择器（div p）天生不区分“直系子元素”和“深层嵌套元素”，它匹配所有在 div 内任意深度的 p。如果你只想影响直接子 p，用它就一定会漏控或过度控制。
- 真正想“过滤子元素”，本质是**换选择器类型**：改用子选择器
>（如div > p），它只匹配父元素的直接子元素 - 如果结构不确定（比如中间可能插一层
section或article），后代选择器反而更稳；但这时你要接受“无法精确到某一层”的事实 - 浏览器兼容性没问题：
>从 IE7 就支持，现代项目可放心用
用 :scope 配合 querySelector 实现运行时子元素过滤
纯 CSS 没有“当前上下文下的子元素”动态过滤能力，但 JS 可以补上——尤其在组件化、动态插入场景下，:scope 是关键。
-
element.querySelector(':scope > .item')确保只查element的直接子节点，不会钻进孙子节点 - 注意：IE 完全不支持
:scope，Edge 17+、Chrome 29+、Firefox 32+ 支持；若需兼容旧版，得手写遍历element.children - 别写成
element.querySelectorAll('.container .item')——这又退化成后代匹配，失去“子元素”约束
CSS :nth-child 和 :nth-of-type 的误用坑
这两个伪类常被当作“子元素过滤工具”，但它们按 DOM 顺序计数，不是按 class 或类型过滤后的序号。
-
.list > div:nth-child(2)匹配的是父元素中**第 2 个子节点**，且该节点必须是div；如果第 2 个子是span，这条规则就失效 -
.list > div:nth-of-type(2)匹配的是父元素中**第 2 个div类型的子元素**，跳过其他标签，但依然依赖真实 DOM 顺序 - 常见错误：以为
:nth-child(1)能选出“第一个带 class='active' 的子元素”——不能，它不看 class，只看位置
用属性选择器 + class 组合做轻量级“逻辑过滤”
当结构固定、但需要按状态或角色筛选子元素时，靠 class + 属性组合比硬套层级更可靠。
立即学习“前端免费学习笔记（深入）”；
- 例如：只给“作为列表项且处于激活态”的子元素加边框：
.list > [role="listitem"].active - 避免写
.list > li.active——万一某处换成div[role="listitem"]就断了；用属性更语义、更稳定 - 性能上无差异，但维护性高：样式规则不再强耦合于 HTML 标签名
真正难的不是写对一个选择器，而是判断“这里到底需不需要精确到子元素层级”。很多时候，加一层 wrapper 元素比在 CSS 里反复试探 > 和 更省事，也更易读。别忘了，CSS 是描述层，不是逻辑层。
