后代选择器匹配任意层级后代，易因dom变动或框架封装失效；应优先用子选择器、bem命名或属性选择器替代，避免跨组件误伤和权重冲突。
后代选择器匹配范围远超预期
后代选择器（如 .user-card .avatar img）不关心层级深度，只要 img 在某个 .user-card 的任意后代位置，就会命中。DOM 结构稍有变动（比如父容器被框架动态包裹、第三方组件插入中间节点），就可能让本不该被影响的 img 被选中。
常见错误现象：header nav a 本意修饰导航链接，结果评论区的 <ul><li><a></a></li></ul> 也被改了颜色——因为 a 确实是 header 的后代（哪怕隔着七八层）。
- 避免用空格分隔的深层路径（>4 级），Lighthouse 的
complex-selectors审计会直接报警 - 改用子选择器
.user-card > .avatar > img，只匹配直接子元素，关系更可控 - 框架（Vue/React）中，
<style scoped></style>或 CSS Modules 并不阻止后代选择器跨组件生效——它只给 class 加哈希，不改变选择器逻辑
类名复用导致选择器“越界”
当你在多个组件里都用了 .btn，而全局写了 .modal .btn，那所有带 .btn 的按钮（包括弹窗外的、表单里的、甚至第三方库的）只要嵌套在某个 .modal 下，全会被覆盖。
这不是 bug，是 CSS 层叠机制的自然结果：浏览器只看 DOM 结构是否满足 A B 关系，不管这个 B 是不是你当前组件的。
- 检查 DevTools Styles 面板里被划掉的样式，悬停看
specificity is lower than another rule，确认是不是别的地方的同类选择器在压你 - 别依赖“我只在这个组件里写过 .btn”，实际运行时 DOM 是扁平的，没有组件边界
- 用 BEM 命名（如
.dialog__confirm-btn）替代泛用类名，从源头切断意外匹配
第三方库样式权重碾压你的组合选择器
Ant Design、Element Plus 这类 UI 库常在末尾加载，且大量使用 .ant-btn-primary 这类高 specificity 类名（0,0,2,0），而你写的 .form .submit-btn 权重只有 0,0,2,0 —— 表面相等，但加载顺序靠后的一方赢；若它们还用了 ID 或内联 style，你的组合选择器基本没机会。
更隐蔽的是：它们内部用 :not()、:has() 或嵌套 5 层的选择器，Lighthouse 会标为 complex-selectors，但你很难手动覆盖。
- 不要硬拼权重，优先用属性选择器兜底，比如
[data-role="primary-submit"]（权重=10，和类持平，但更唯一） - 禁用
@import，确保自定义 CSS 在所有第三方样式之后加载 - 遇到
.ant-modal .ant-btn覆盖你时，别写.my-form .submit-btn !important，改用.my-form [data-my-btn="submit"]+ JS 动态加属性
scoped 或 CSS Modules 并不隔离组合选择器
很多人误以为 <style scoped></style> 能让 .card .title 只作用于当前组件，其实它只是给每个 class 加上属性选择器（如 .card[data-v-abc123] .title[data-v-abc123]）。如果子组件也用了 .title，并且没加 scope，或者用了 deep / >>> ，照样会被匹配。
更麻烦的是：Sass 嵌套编译后仍是后代选择器，.card { .title { } } → .card .title，完全没解决封装问题。
- scoped 下慎用后代选择器，优先写单类名
.card-title，它会被完整哈希化，不会泄漏 - 需要穿透时，用
:deep(.child-class)显式声明，而不是靠空格隐式继承 - CSS Modules 中，
compose比嵌套更安全，const title = compose(cardTitle, large)生成唯一 class，无耦合
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
