写按钮样式时最头疼的情况之一，就是多个状态类互相打架。比如给按钮同时设置了默认样式、hover样式、禁用样式，结果禁用状态下鼠标移上去仍然变色，或者点击态怎么都显示不出来。这不是浏览器出了问题，而是CSS层叠机制在起作用：当多条规则命中同一个元素的同一个属性时，浏览器要根据选择器优先级和书写顺序决定谁生效。理解这套规则，再配合合理的选择器设计，冲突就能彻底解决。
先弄清楚：为什么按钮状态会互相覆盖
CSS的全称是层叠样式表，层叠（Cascade）是它的核心机制。当多个规则同时命中一个元素时，浏览器按三个维度排序：来源、优先级（specificity，也叫特异性）、书写顺序。在日常开发中，最常打交道的就是优先级和书写顺序这两个维度。
优先级的计算规则可以理解为三组数字：(行内样式, ID数量, 类/伪类/属性选择器数量, 元素/伪元素数量)。比如.btn:hover的权重是 (0,1,1) 中的一段——它包含一个类和一个伪类，而.btn只有一个类，所以.btn:hover能赢。但如果规则是.btn-primary写在前、.btn:disabled写在后，且两者权重相同，那么后写的会覆盖先写的，这时候状态的表现就取决于CSS文件里的排列顺序，一旦顺序被打乱，样式立刻失控。
另一个常见原因是状态类和伪类同时使用。下面这段代码是典型的错误示范：
.btn {
background: #409eff;
cursor: pointer;
}
.btn:hover {
background: #66b1ff;
}
.btn.is-disabled {
background: #c0c4cc;
cursor: not-allowed;
}
/* 问题：元素为 class="btn is-disabled" 且被禁用时，
.btn:hover 权重 (0,2,0) 与 .btn.is-disabled 相同，
但如果 .btn.is-disabled 写在前面，hover 规则后写，
鼠标移上去背景仍然会变成 #66b1ff */
这段代码的问题在于，.btn.is-disabled和.btn:hover的优先级完全一样（一个类加一个类/伪类），最终结果由书写顺序决定。一旦有人调整了文件里的规则顺序，或者在另一个文件里追加了hover规则，禁用态立刻失效。这种隐式依赖顺序的写法是维护的定时炸弹。
用更高优先级的类选择器解决冲突
解决思路很直接：让必须生效的状态拥有更高的优先级。禁用态属于强约束状态，按钮一旦禁用，无论鼠标怎么悬停、怎么点击，外观都不应该变化，所以它的选择器权重应该压过所有交互状态。
最常用的做法是叠加类名或伪类，提升选择器权重：
/* 基础样式，权重 (0,1,0) */
.btn {
background: #409eff;
cursor: pointer;
}
/* 悬停样式，权重 (0,2,0) */
.btn:hover {
background: #66b1ff;
}
/* 按下样式，权重 (0,2,0) */
.btn:active {
background: #3a8ee6;
}
/* 禁用样式，类 + 伪类，权重 (0,3,0)，
高于上面任何一条交互规则 */
.btn.is-disabled,
.btn:disabled {
background: #c0c4cc;
cursor: not-allowed;
pointer-events: none;
}
/* 双保险：即使禁用态被 hover 命中也强制覆盖 */
.btn.is-disabled:hover,
.btn:disabled:hover {
background: #c0c4cc;
}
这里有两个关键点。第一，.btn.is-disabled与.btn:disabled并列写在同一条规则里，分别照顾用类名控制禁用的场景和直接设置disabled属性的场景，兼容性最好。第二，pointer-events: none直接从事件层面屏蔽了鼠标交互，配合高权重的背景色声明，禁用按钮在任何操作下都保持稳定外观。
如果项目里使用了CSS预处理器，还可以借助嵌套语法让结构更清晰，但权重原理不变。需要注意的是，不建议用!important来解决这类冲突。它虽然见效快，但会破坏整个层叠体系，后续任何针对该属性的覆盖都得继续加!important，最终让样式表变成无法维护的战场。
规范状态类的书写顺序和命名
除了提升权重，建立一套稳定的状态类命名和书写顺序规范同样重要。推荐的顺序是：基础样式、变体样式（如主按钮、危险按钮）、交互状态（hover、focus、active）、强约束状态（disabled、loading）。这个顺序和优先级递增的逻辑一致，即使权重偶尔相同，后写的强约束状态也能自然覆盖前面的交互状态。
命名上建议采用状态前缀的约定，比如is-、has-开头表示运行时状态，避免和btn-primary这类外观变体混在一起：
<button class="btn is-loading">提交中...</button> <button class="btn btn-danger is-disabled">删除</button>
/* 变体样式 */
.btn-danger { background: #f56c6c; }
/* 加载状态，权重 (0,2,0)，写在变体之后 */
.btn.is-loading {
background: #909399;
pointer-events: none;
}
/* 禁用状态叠加变体，权重 (0,3,0)，保证最高优先级 */
.btn.btn-danger.is-disabled {
background: #fab6b6;
cursor: not-allowed;
}
注意.btn.btn-danger.is-disabled这种写法，三个类叠加后权重达到 (0,3,0)，专门用来压制危险按钮自身的红色背景，确保禁用后呈现的是浅灰红而不是刺眼的正红。这种针对特定变体的状态规则，在实际项目中非常实用。
最后补充一个调试技巧：当怀疑是优先级冲突时，打开浏览器开发者工具的Elements面板，右侧Styles窗格会按命中顺序列出所有规则，被覆盖的属性会被划线显示。顺着这个列表从上往下看，哪条规则赢了、为什么赢，一目了然。掌握优先级计算加规范书写这两招，按钮状态层叠冲突基本可以从项目里根除。