Chrome DevTools中被划掉的CSS规则表示被更高权重规则覆盖，需检查specificity四元组、来源文件及!important；.btn与.btn.primary权重相同（0,0,2,0），但#app .btn（0,1,1,0）可压过二者；BEM类需配合块级类使用；构建工具和动态插入会改变实际生效顺序；可靠解法是提升选择器权重而非依赖书写顺序。
因为“后面的类没覆盖前面的类”，大概率不是顺序问题，而是两个类的选择器权重（specificity）根本不同，或者其中一条规则被其他更高权重的规则提前截胡了。
Chrome DevTools 里被划掉的规则到底在说什么
打开 Chrome DevTools → Elements → 选中目标元素 → 右侧 Styles 面板中带删除线（strikethrough）的规则，就是被覆盖的。鼠标悬停会提示 This rule was overridden by …，重点看三项：
-
Specificity：显示为
0,0,1,0这类四元组，不是加法，是逐位比较。哪怕多一个无意义的标签选择器（如button.btn），权重就从0,0,1,0变成0,0,1,1，直接压过.btn -
Source：点文件名跳转，确认是不是组件库、reset.css 或同事代码里另一处
.btn悄悄定义了更高权重的版本 - !important：它不参与 specificity 计算，但会让该声明“插队”；一旦出现，后续所有覆盖都得对齐它，调试成本陡增
.btn 和 .btn.primary 权重真的不一样吗
它们权重相同——都是 0,0,2,0。因为 .btn.primary 是单个选择器，含两个 class，不是两个独立规则。所以：
- 如果
.btn { color: red; }和.btn.primary { color: blue; }权重一样，且后者在 CSS 文件里位置靠后，blue就生效 - 但如果页面里还有一条
#app .btn { color: green; }，权重变成0,1,1,0，它就会无视前后顺序，稳稳压过前两者 - BEM 类型写法如
.button__text--large单独使用无效，必须配合块级类（如.button.button__text--large），否则权重仍是0,0,2,0，极易被更具体的选择器覆盖
构建工具和 runtime 插入时机悄悄改了“谁在后面”
你写的顺序 ≠ 浏览器解析的顺序。常见干扰项：
立即学习“前端免费学习笔记（深入）”；
- Vite / Webpack 的 CSS 提取插件（如
mini-css-extract-plugin）可能把<style scoped>、全局样式、动态 import 的样式打乱重排 - Vue 的
<style scoped>生成的属性选择器（如[data-v-abc123]）权重等同于 class，但因 runtime 插入时机靠后，常“意外赢过”静态引入的.btn - 第三方 SDK（埋点、UI 组件库）通过 JS 动态插入
<style>，默认追加到<head>末尾，天然比 HTML 中的<link>靠后
真正可靠的解法不是调顺序，而是提权：用容器限定（.my-app .btn）、加属性选择器（.btn[data-role="primary"]）、或确保块修饰符共存（.button.button--primary）。最容易被忽略的是 specificity 四元组的逐位比较逻辑——它不看你写了几个 class，而看你在哪一层用了多少 ID、类、标签。
