外部CSS文件按HTML中标签顺序加载，后加载的同权重样式覆盖先加载的。!important无法跨文件生效，动态插入需控制时机，最稳方案是将关键样式置于最后加载的文件中。
外部CSS文件加载顺序决定样式覆盖结果
浏览器按HTML中 <link> 标签出现的先后顺序逐个解析CSS，后加载的样式规则会覆盖前面同权重、同选择器的声明。这不是“谁更高级”，就是纯粹的“后写赢”。
常见错误现象：button { color: red; } 在第一个CSS里写了，但页面上按钮还是蓝色——大概率是第二个CSS里又写了 button { color: blue; }，且它在HTML里位置更靠后。
使用场景：主题切换、第三方UI库（如Bootstrap）与自定义样式共存、微前端子应用独立样式注入。
- 检查HTML源码中
<link rel="stylesheet">的排列顺序，不是开发者工具里“Computed”面板显示的顺序 - 避免用
@import在CSS内部引入其他文件，它会阻塞并改变实际解析时序，等效于把被导入内容“粘贴”到该行位置 - Webpack/Vite等构建工具打包后可能打乱原始顺序，需确认插件（如
HtmlWebpackPlugin）是否保持了chunks插入顺序
同选择器下，外部CSS顺序优先级高于!important
!important 只能压制同一份样式表内的冲突，压不住外部文件加载顺序带来的覆盖。如果A.css写了 h1 { font-size: 24px !important; }，B.css稍后加载且写了 h1 { font-size: 32px; }，最终生效的是32px。
立即学习“前端免费学习笔记（深入）”；
原因：浏览器把每份外部CSS解析成独立规则集，再按引入顺序合并；!important 的作用域仅限于当前规则集内部。
- 不要依赖
!important来“抢赢”另一个外部文件——它不工作 - 真要强制覆盖，要么调换HTML中
<link>位置，要么把关键样式内联进<style></style>标签（注意：内联style权重高于所有外部CSS） - 检查开发者工具Elements面板里，目标元素上哪条样式被划掉（strikethrough），点开对应文件名，确认它是不是被后面加载的CSS干掉了
多个CDN或动态插入CSS时顺序极易失控
用 document.createElement('link') 或第三方SDK自动注入CSS时，顺序由JS执行时机决定，和HTML静态结构无关。异步加载、懒加载、React组件挂载时插入，都可能导致样式“闪动”或失效。
典型表现：页面刚打开是正确样式，刷新一下变回默认；或者部分用户看到旧样式，部分看到新样式。
- 动态插入CSS务必用
link.onload或Promise控制后续操作，别假设“插完就生效” - 避免同时从多个CDN引入同一类库（比如两个不同版本的Tailwind），它们的CSS文件可能互相覆盖，且无法预测谁先加载完
- Vue/React中，不要在
useEffect或mounted里反复插入/移除同一份CSS——浏览器不会去重，每次都是新规则，顺序只取决于最后一次插入时间
