根本原因是相同选择器、相同权重、不同来源的CSS规则同时参与层叠计算。应二选一统一来源，或通过@layer、作用域隔离、属性选择器等降低冲突风险。
为什么本地样式和 CDN 样式会冲突
根本原因不是“本地 vs CDN”本身，而是**相同选择器、相同权重、不同来源的 CSS 规则被浏览器同时加载并参与层叠计算**。比如你本地写了 .btn { color: red; }，CDN 上的某个 UI 库（如 Bootstrap）也定义了 .btn { color: blue; }，且两者 specificity 完全一致，那后加载的那个会生效——而加载顺序又受 <link> 位置、async/defer、HTTP/2 推送等影响，变得不可控。
怎么强制统一引入来源（不混用）
最稳妥的做法是「二选一」，而不是试图调和。实际项目中应按以下逻辑决策：
- 如果项目已重度依赖 CDN（如用
https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/css/bootstrap.min.css），就彻底删除所有本地bootstrap.css或main.css中重复覆盖 Bootstrap 基础类的规则，改用自定义 CSS 变量或.my-btn-primary这类 BEM 风格新类名扩展 - 如果需要离线可用、定制化高、或规避 CDN 不稳定风险，就全部转为本地：下载对应版本 CSS 文件（如从 unpkg 或官方 GitHub Release 下载
bootstrap.min.css），存入public/css/，并通过相对路径引入 - 避免「本地引 reset.css + CDN 引框架 CSS」这类组合——reset 和框架往往都重置了
button、h1等全局标签，极易触发隐性冲突
当必须共存时，如何降低冲突风险
极少数场景（如老系统嵌入新组件）无法立即统一来源，此时靠 specificity 和 scope 控制比硬调顺序更可靠：
- 给 CDN 样式加
data-source="cdn"属性，并在本地 CSS 中用属性选择器提高权重：[data-source="cdn"] .btn { color: inherit !important; }（慎用!important，仅用于兜底） - 用
@layer显式声明层叠顺序（现代浏览器支持）：@layer cdn { @import url('https://cdn.example.com/lib.css'); } @layer local { /* 你的样式 */ }，这样即使 CDN 样式后加载，也会被@layer local覆盖 - 对第三方样式做作用域隔离：用
<div class="third-party-scope">...</div>包裹 CDN 组件，然后在 CSS 中写.third-party-scope .btn { ... }，避免污染全局
检查冲突的快速方法
别猜，直接看 DevTools 的 Computed 面板：
立即学习“前端免费学习笔记（深入）”；
- 右键目标元素 → 「Inspect」→ 切到「Computed」标签页 → 找到要调试的属性（如
color）→ 点击右侧小箭头展开来源列表，能看到哪条规则胜出、来自哪个文件、是否被 override - 在 Elements 面板中，被划掉的 CSS 声明表示它被更高优先级规则覆盖；若发现同一选择器在多个文件中出现，基本就是冲突源头
- 用命令行快速定位重复类名：
grep -r "\.btn {" public/css/ node_modules/ | head -10（注意路径适配）
真正麻烦的从来不是“怎么让两个样式一起工作”，而是“哪个该删、哪个该留、谁负责维护”。一旦开始混合引入，后续每次升级 CDN 版本或修改本地样式，都要重新验证视觉一致性。
