最稳妥的做法是用优先级更高的类选择器显式接管状态样式，统一将伪类状态封装为普通类（如.is-hovered、.is-disabled），由js控制增删，css只写.btn.is-disabled等明确组合，所有规则优先级一致且可控。
按钮状态层叠冲突，本质是多个 CSS 规则同时匹配同一个按钮元素，而浏览器按优先级（specificity）和书写顺序决定最终生效的样式。单纯靠“后写的覆盖前写的”不可靠，尤其在引入第三方库或多人协作时。最稳妥的做法，是用优先级更高的类选择器显式接管状态样式，而非依赖顺序或过度使用 !important。
明确状态类的优先级层级
浏览器计算选择器优先级时，.btn.active 比 .btn:hover 优先级高（因为两个类 vs 一个类），但 .btn:hover 和 .btn:disabled 优先级相同，此时谁在后面谁生效——这容易出错。建议统一用“类+类”组合：
- 把伪类状态（如
:hover、:active、:disabled）对应的状态，也封装成普通类，例如.is-hovered、.is-disabled - 所有交互逻辑由 JS 控制增删这些类，CSS 只写
.btn.is-disabled、.btn.is-hovered等明确组合 - 这样所有规则都是“类选择器 × 2”，优先级一致且可控，避免伪类与自定义类混用导致的意外覆盖
用嵌套类名提升局部作用力
当按钮位于特定容器中（如弹窗、表单区域），可借助上下文提升选择器权重，不污染全局：
- 写成
.modal .btn-primary.is-loading而非仅.btn-primary.is-loading - 或使用 BEM 风格：
.btn--primary.btn--loading，两个独立类，语义清晰且权重自然高于单个类 - 避免用 ID 或标签名（如
button.btn.loading）强行提权——ID 过重难维护，标签名太弱易被覆盖
禁用默认伪类，全交由类控制
为彻底规避伪类与自定义类的优先级博弈，可在基础按钮样式中“清空”原生状态：
立即学习“前端免费学习笔记（深入）”；
- 给
.btn加pointer-events: none;（慎用，影响可用性）或更合理地——重置伪类样式 - 例如：
.btn:hover, .btn:active, .btn:focus { all: unset; }，然后只响应你定义的.is-hovered等类 - 这样所有视觉反馈完全由你掌控，JS 切换类即切换状态，无隐式优先级干扰
基本上就这些。核心不是“怎么压过别人”，而是“让自己的规则足够明确、足够一致”。用好类组合、控制作用域、收编伪类行为，状态层叠就不再是玄学问题。
