子代选择器>比空格更安全，因它仅匹配直接子元素，路径更短、意图更明确，可降低样式越界污染概率；空格为后代选择器，匹配任意深度嵌套，易误中深层元素或第三方组件。
子代选择器 > 本身不能防止全局污染，但它能显著降低污染概率——前提是用对位置、不滥用、配合合理结构。
为什么 > 比空格更安全
空格是后代选择器，匹配任意深度的嵌套；> 只匹配直接子元素，路径更短、意图更明确。比如 .card div 会命中 .card > .header > h3 > span 里的所有 div，而 .card > div 只抓第一层。
- 层级失控时，空格选择器极易“越界”影响第三方组件（如 Ant Design 的弹窗挂载到
body下，body .btn就会误中） -
>天然拒绝跨层匹配，结构一变样式就失效——这反而是好事：让你立刻发现 DOM 变动，而不是默默污染远处元素 - 浏览器渲染引擎对
>的匹配效率略高于多层空格，尤其在长列表或动态插入场景下
> 和 BEM 类名怎么配合才不冗余
单独用 > 容易写成 .list > .item > .content > p，四层已接近维护极限；但配上 BEM，就能把深度压到两层以内。
- 推荐写法：
.user-card > .user-card__header—— 前半段是 block 容器，后半段是语义化子元素，既锁定范围又保留可读性 - 避免
.user-card > div > h3这类依赖标签名的写法：一旦换成section或加了 wrapper，样式就断 - BEM 的
__已隐含父子关系，所以.user-card__header本身就不该再被.user-card > .user-card__header多余包裹——除非你真需要排除 JS 动态插入的同名 class
哪些场景下 > 反而会加剧污染
它不是银弹，用错地方照样翻车。
- 在根级容器上滥用，比如
body > div或html > body > * > button：看似精准，实则比button全局选择器权重还高，且极易被第三方库插入的节点意外命中 - 和伪类连用时忽略结构约束，如
.modal > :nth-child(2)：如果 modal 内部结构变化（比如加了个注释节点或条件渲染空 div），序号就偏移，样式错位 - 与
:not()嵌套使用，如.form > :not(.ignore) > input：可读性骤降，调试时根本看不出实际匹配路径
替代方案比拼：什么时候该放弃 >
当你要控制的元素不具备稳定父容器，或结构动态性太强时，硬靠 > 锁定反而脆弱。
- 第三方组件内样式：用
@scope (.card) { ... }（Chrome 125+、Safari 17.4+ 支持），真正隔离作用域，不依赖 DOM 层级 - 构建环境可控时：优先用 CSS Modules，
.card__header编译成Card_header__abc123，从源头杜绝冲突 - Vue/React 单文件组件：直接上
<style scoped></style>，Vue 自动加data-v-xxx属性，比手写>更省心也更可靠
真正容易被忽略的点是：子代选择器解决的是“匹配精度”问题，不是“作用域隔离”问题。它防不住别人写的 !important，也拦不住动态插入的节点逃逸出你的 > 范围——需要隔离，就得换机制，别死磕路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
