css引入顺序仅在权重、来源和重要性相同时起最终裁决作用；特异性不足的规则无法参与层叠比较，!important不跨文件生效，动态插入易导致顺序失控，可靠策略是按语义分层引入。
CSS引入顺序本身不决定“谁该赢”，它只在权重（specificity）、来源（origin）和重要性（importance）都相同时才起作用——换句话说，link标签的书写顺序是层叠规则里的“最终裁决者”，不是第一道门槛。
为什么后写的CSS规则有时不生效
你以为改了顺序就万事大吉，但浏览器根本没让它参与“比大小”：它的选择器特异性太低，连决赛圈都没进。比如你在app.css里写.btn { color: red; }，而前面bootstrap.css里有.btn.btn-primary:hover { color: blue; }，后者特异性是0,0,2,1，前者只有0,0,1,0，压根不会被拿去跟顺序比。
- 用Chrome DevTools选中元素，在Styles面板看被划掉的样式，悬停会显示「This rule was overridden by …」，点文件名能跳转到对应
link位置 - 临时禁用高特异性规则（比如取消勾选
.btn-primary:hover那行），观察你的样式是否立刻出现 - 不要只盯着顺序，先确认你写的规则有没有资格“参战”——查特异性：ID数、类数、元素数，四位数全算上
!important不能跨文件“抢赢”顺序
!important只在单个样式表内部提升声明的重要性层级，它不跨link边界。如果你在A.css里写h1 { font-size: 24px !important; }，又在后面加载的B.css里写h1 { font-size: 32px; }，最终生效的是32px。
- 原因：浏览器把每个外部CSS解析为独立规则集，再按
link顺序合并；!important的作用域仅限于当前规则集 - 想强制覆盖？调换
link顺序，或把关键样式挪进<style></style>块（来源权重高于外部CSS） - 慎用
!important来“补救”顺序问题——它掩盖了真正的问题：结构混乱或特异性设计不合理
动态插入CSS时顺序完全失控
用document.createElement('link')或第三方SDK注入样式，顺序由JS执行时机决定，和HTML静态结构无关。常见表现是：页面闪一下变回默认样式，或部分用户看到旧样式。
- Webpack/Vite打包后，
HtmlWebpackPlugin可能打乱原始link插入顺序，需检查chunks配置是否保持依赖顺序 - Vue SFC中
<style scoped></style>生成的属性选择器（如[data-v-abc123]）权重等同类选择器，但构建后插入时机靠后，可能意外“赢过”全局样式 - 避免
@import混用：@import在CSS文件内会阻塞后续解析，且其内容层叠位置取决于它在源文件中的行号，不是实际下载完成时间
最稳的引入顺序不是“就近”，而是分层明确
所谓“就近原则”是误导——真正可靠的是按语义分层：越基础、越通用的越靠前，越具体、越覆盖的越靠后。这不是经验主义，是让特异性与顺序形成合力，而不是互相打架。
- reset.css / normalize.css → 必须最前，清空浏览器默认
- 第三方UI库（如
element-plus.css）→ 紧随其后，提供组件基类 - 项目变量与工具类（
variables.css,utils.css）→ 定义可复用原子 - 页面/主题样式（
home.css,dark-theme.css）→ 放最后，专用于覆盖
复杂点在于：同一份样式，可能既需要高特异性来确保生效，又得靠后加载来保留覆盖权。这时候别硬凑一个选择器，拆开——把基础定义放靠前文件，把覆盖逻辑放靠后文件，让两者各司其职。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
