后代选择器.my-class div匹配所有嵌套层级的后代div，而子选择器.my-class > div仅匹配直接子元素，更安全；:scope可限定JS查询上下文，但独立CSS中无效；还需防范优先级覆盖与继承污染。
后代选择器如何精准限定在某个 class 内部作用
只用 .my-class div 这类写法，确实能选中 .my-class 内部的 div，但它的实际行为是「所有嵌套层级的后代」——哪怕隔着 5 层容器，只要在 .my-class 下，就匹配。这不是“当前 class 下的直接子元素”，而是“整个子树”。如果目标是控制作用范围不溢出，关键不在“怎么写”，而在“别让其他规则干扰”。
为什么 .my-class > div 比 .my-class div 更安全
> 是子选择器，只匹配直接子元素，层级明确、意图清晰。它天然防止样式穿透到深层嵌套结构，也避免意外覆盖第三方组件内部的同名标签。使用时注意：
-
.my-class > div不会匹配<div class="my-class"><section><div>…</div></section></div>中的内层div - 若目标元素不是直接子级（比如中间有
article或main），>就失效，此时必须确认 DOM 结构是否可控 - 某些 UI 库（如 Ant Design、Element Plus）会在组件内部动态插入 wrapper 元素，导致原本的
>失效，这时得配合属性选择器或:scope
用 :scope 实现真正“当前作用域内”的选择
:scope 是 CSS 原生支持的伪类，表示当前选择器上下文的根元素（例如 JS 中 el.querySelector() 的 el）。它在现代浏览器中已稳定支持（Chrome 28+、Firefox 32+、Safari 15.4+），适合配合 JS 动态作用域使用：
.my-class:scope > div {
color: red;
}
更实用的是在 JS 中结合 querySelectorAll：
立即学习“前端免费学习笔记（深入）”；
const container = document.querySelector('.my-class');
container.querySelectorAll(':scope > div'); // 只取 container 的直接子 div
container.querySelectorAll(':scope .item'); // 取 container 内任意层级的 .item
注意：:scope 在独立 CSS 文件中单独写（如 :scope > div）无效，必须作为 JS 查询的一部分，或配合 @scope（目前仅 Safari 16.4+ 支持，尚未广泛可用）。
容易被忽略的边界：CSS 优先级和继承污染
即使选择器写对了，样式仍可能被覆盖。常见原因包括：
- 外部框架的 CSS 规则权重更高（如
div.my-class div比.my-class div多一个类型选择器，优先级更高） - 父元素设置了
color或font-size等可继承属性，子元素没显式重置 - 使用了
!important的第三方样式强行劫持
解决思路不是堆砌更长的选择器，而是用 all: unset 或 initial 主动切断继承链，再逐项声明所需样式。比如：
.my-class > div {
all: unset;
display: block;
color: #333;
}
真正难的不是“怎么选中”，而是“选中之后，如何确保它按你预期渲染”——DOM 结构变动、CSS 优先级叠加、继承链干扰，三者常同时发生，需一起排查。
