后引入的CSS仅在来源、重要性和特异性均相同时才覆盖先引入样式；否则顺序无效。根本原因常是特异性不足（如Bootstrap用#app .btn而自定义仅用.btn）、!important滥用或reset.css位置错误，需通过DevTools检查Specificity、Source及覆盖提示精准定位。
后引入的 CSS 文件只有在「来源相同、重要性相同、特异性相等」时，才会覆盖先引入的同名样式；否则，顺序根本不起作用——这是绝大多数人误调顺序却无效的根本原因。
为什么改了顺序样式还是没变
你以为把自定义 CSS 放在 Bootstrap 后面就能覆盖按钮样式，结果 .btn 还是蓝色？大概率不是顺序错了，而是特异性输了。比如 Bootstrap 里写的是 #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 - 动态插入的
<link>（如 JS 创建）默认追加到<head>末尾，天然比静态<link>晚，但若插入太早（比如 DOM 尚未 ready），可能被框架样式反杀
reset.css 必须放在最前面，否则就是自找麻烦
重置样式的作用是“归零”，不是“增强”。如果 reset.css 写在业务 CSS 后面，那它就会把你刚设好的 button { padding: 8px; } 又打回 padding: 0; —— 不是 bug，是设计如此。
- 标准加载顺序应为：
reset.css→base.css（字体、间距、变量）→components.css（按钮、卡片等）→page.css（页面专属） -
@import必须出现在 CSS 文件最开头，否则整个语句被忽略；且它阻塞渲染，不建议在<link>后混用 - Vue 的
<style scoped>生成的属性选择器（如[data-v-abc123]）权重等同于类，但因构建后插入时机靠后，常“意外赢过”全局样式
!important 不是补丁，是信号灯
加了 !important 能让单条声明跳过特异性比较，但它不提升选择器权重，也不能穿透作用域。更危险的是：它会让后续所有修改都不得不跟着加 !important，形成恶性循环。
立即学习“前端免费学习笔记（深入）”；
- 多个
!important同时存在时，仍要比特异性——#nav .item:hover { color: red !important; }会赢过.item { color: blue !important; } - 浏览器插件（如 Dark Reader）注入的样式也带
!important，开发者几乎无法反制 - React/Vue 中 CSS-in-JS（如
styled-components）默认用唯一属性选择器隔离样式，此时滥用!important更易引发不可预测覆盖
真正难的不是记住谁比谁优先，而是当你看到导航栏在某个页面突然变粗、变色、错位时，得立刻判断：是 todo_style.css 里那个没注释的 * { font-weight: 600 !important; } 搞的鬼，还是 style.css 里的 ID 选择器被某处动态 class 意外匹配了——这种隐式冲突，永远藏在 DevTools 的第三层折叠项里。
