CSS样式“突然不生效”的根本原因是选择器权重与加载顺序共同作用；如index.css中.btn{color:blue}可能覆盖widget.css中同选择器的color:red声明，尤其当后者加载更早或嵌套在低优先级@import中。
为什么 CSS 多层引入后样式会“突然不生效”
根本原因不是“引入太多”，而是选择器权重（specificity）和加载顺序共同作用的结果。比如 index.css 里定义了 .btn { color: blue; }，而后来通过 JS 动态插入的 widget.css 也写了 .btn { color: red; }，但没加 !important，也没提高选择器权重，就可能被前者覆盖——尤其当后者加载更早、或被 @import 嵌套在低优先级位置时。
如何定位哪条样式被覆盖了
浏览器开发者工具里看“Computed”面板最直接：找到目标元素，展开 color 或其他属性，被划掉的那条就是被覆盖的；点击右侧来源链接能跳转到对应 CSS 文件和行号。注意两点：
- 检查是否启用了“Disable cache”（网络面板右上角），否则可能看到的是旧缓存版本
- 如果样式来自
style标签或内联，它们的权重高于外部 CSS 中的类选择器 - 用
getComputedStyle(document.querySelector('.btn'))在控制台验证真实生效值，避免被伪类或媒体查询干扰
避免层级混乱的实操策略
不靠删文件、也不靠堆 !important，重点控制三件事：加载时机、作用域、选择器强度。
- 把第三方组件的 CSS 放在
最前面，项目主样式放最后，确保自定义样式有更高机会覆盖 - 用
:where()或:is()降低第三方选择器权重，例如把.third-party-modal .header h1改成:where(.third-party-modal) :where(.header) h1，让它不参与 specificity 计算 - 对强侵入性库（如某些 UI 组件库），用
标签配合[data-scope]属性做局部重置：Click
构建时能否自动检测冲突
可以，但别指望全自动修复。推荐两个轻量方案：
立即学习“前端免费学习笔记（深入）”；
- 用
css-tree+ 自定义脚本扫描所有 CSS 文件，提取所有类名并统计重复出现次数，快速发现高频冲突点（比如.container、.hidden） - 在 Webpack/Vite 中接入
postcss-discard-duplicates插件，它能剔除完全相同的规则块，但对语义相同、写法不同的规则（如.a.b和.b.a）无能为力 - 真正难处理的是 BEM 风格命名与非 BEM 混用——比如
.header__title和.title同时存在且作用于同一元素，这时必须人工判断语义归属，工具帮不上忙
