CSS选择器失效主因是匹配范围偏移或优先级被覆盖，需用DevTools查strikethrough样式及specificity四元组，优先提升精准度而非滥用!important。
改动一行选择器就让三个模块的卡片圆角、按钮文字粗细、侧边栏缩进全乱了——这不是 CSS 有“魔法”，而是选择器的匹配范围和优先级在 DOM 结构变化后发生了隐性偏移。
后代选择器一改，匹配范围指数级漂移
比如把 .card .title 改成 .card > .title，表面只是加个 >，但实际影响是：前者匹配所有嵌套层级的 .title（包括 .card > .header > .title），后者只认直接子元素。一旦组件模板里插入了一层包装 <div class="wrapper"><h2 class="title">...</h2></div>，原样式立刻失效，而新规则又可能漏掉其他已存在的结构。
- DOM 深度每增加一层，
.a .b .c类选择器的回溯路径就多一次向上遍历，5 层结构下匹配耗时可翻 3 倍 - Vue/React 中用
v-if或条件渲染控制的节点，会让选择器“有时生效、有时不生效”，DevTools 里看不到报错，只看到样式断续出现 - Shadow DOM 内部的
.card .title完全不匹配外部定义的同名类，但开发者常误以为“类名一样就能复用”
类名复用 + 低特异性 = 样式污染不可控
多个组件共用 .btn，又各自写 .modal .btn、.form .btn、.sidebar .btn，看似隔离，实则埋雷：只要某处加了 .btn { padding: 8px; } 这种无父级约束的全局规则，所有按钮立刻被拉平。
- 没有 BEM 约束时，
.user-card .btn和.admin-panel .btn的权重都是 0,0,2,0，谁在后面加载谁赢，顺序依赖极强 - 构建工具（如 Webpack）对 CSS 的 chunk 拆分可能打乱样式加载顺序，导致本地 OK、线上飘忽
- 第三方库（如 Ant Design）自带
.ant-btn规则，若你写了.btn并未加!important，大概率被覆盖且难以定位
变量 + 深层选择器 = 回退失效+重算雪崩
.page .main .section .card .title { color: var(--text-primary); } 这类写法，改一个变量值，浏览器不是只更新 .title，而是要重跑整条选择器链 + 所有继承路径上的 var() 计算。
立即学习“前端免费学习笔记（深入）”；
-
var(--text-primary)在 :root 未定义时不会 fallback 到声明里的第二参数，而是取继承值或初始值，结果字体颜色变成透明或黑色 - JS 动态设置
el.style.setProperty('--text-primary', '')后，该变量“已定义但为空”，回退值彻底不触发 - Chrome Performance 面板中 “Recalculate Style” 时间突增 40ms+，90% 是这类组合导致，而非 JS 执行慢
真正危险的不是“改了什么”，而是“没意识到这个选择器原本靠什么才恰好生效”。DOM 结构微调、组件库升级、甚至构建配置变更，都可能让一条看似安全的选择器瞬间穿透到不该管的区域——查问题时别只盯 CSS 文件，先看 DevTools 的 “Computed” 面板里，那条生效样式底下压着多少层被覆盖的规则。
