css样式引入顺序仅在选择器特异性（权重）相等时生效，否则高特异性规则直接胜出；引入方式存在天然优先级梯队：内联样式 > 内部/外部（平级）>@import；动态插入需用insertbefore控制位置，避免append导致意外覆盖。
CSS样式表引入顺序只在选择器特异性相等时才起作用，不是“后写的一定赢”，而是“同权重下后加载的胜出”。绝大多数人调换顺序却无效，根本原因是特异性不匹配，比如 #app .btn 和 .btn 从来就不是同权重。
为什么改了顺序样式还是没变
你以为把自定义 CSS 放在 Bootstrap 后面就能覆盖按钮颜色，结果 .btn 还是蓝色？大概率不是顺序错了，而是选择器输了。
-
#app .btn-primary特异性是 (0,1,1,0)，而你只写了.btn-primary→ (0,0,1,0)，后者连参与“顺序决胜”的资格都没有 - 打开 Chrome DevTools → Elements → 选中元素 → 看右侧 Styles 面板里被划掉的规则，悬停提示 “This rule was overridden by …”
- 重点核对三处：
Specificity（四位数）、Source（来自哪个文件）、有没有!important
哪些引入方式天然有优先级梯队
引入方式本身自带硬性排序，顺序调整无法跨越这个层级：
- 内联样式（
style="color: red"）权重固定为 (1,0,0,0)，压倒所有外部 CSS -
<style></style>块和外部<link>平级，谁在 HTML 中更靠后，谁覆盖同权重规则 -
@import必须写在<style></style>开头，且解析时机晚于所有<link>，相当于“插队失败还迟到”，2026 年已基本弃用
动态插入 CSS 的顺序陷阱比静态更隐蔽
JS 创建 <link> 并 appendChild 到 ，默认插在末尾，天然“最强”——但这往往不是你想要的。
- 换肤时注入
dark.css，如果它压过了pages/home.css，首页微调就全丢了 - 正确做法是插到目标节点之后：
document.head.insertBefore(newLink, baseLink.nextSibling) - 避免在
DOMContentLoaded后才插入关键样式，否则可能触发 FOUC（闪白） - 微前端场景下，各子应用独立注入 CSS，顺序完全不可控，此时单靠调整
<link>顺序已无意义
真正难的不是记住谁比谁优先，而是当你看到导航栏在某个页面上突然变宽，却找不到哪条规则在起作用——这时候得先看 DevTools 里哪条被划掉了，再顺着提示跳转到源文件，而不是凭感觉调顺序或加 !important。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
