无需!important与样式重复，实现button:disabled伪类样式覆盖类样式

问题背景 #

设置button元素样式时，button:disabled伪类样式会被元素上的自定义类（如.primary）覆盖。示例代码如下：

CSS 代码 #

button { background-color: #F5F5F5; border-color: #F0F0F0; color: #000; }
button:hover { background-color: #FFF; }
button:active { background-color: #E5E5E5; }
button:disabled { background-color: transparent; border-color: transparent; color: #777; }

button.primary { background-color: #9F03FF; border-color: #8400DA; color: #FFF; }
button.primary:hover { background-color: #AF2CFF; }
button.primary:active { background-color: #7800C1; }

HTML 代码 #

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>

<button disabled="disabled">Default disabled</button>

<!--
  以下按钮会显示button.primary的样式，
  并且会响应:hover和:active状态变化，
  而非button:disabled的样式
-->
<button class="primary" disabled="disabled">Primary disabled</button>

需求 #

无论按钮应用哪种颜色类（共12个），所有禁用按钮都统一使用默认禁用样式。要求不重复样式、不使用!important。

解决方案 #

利用CSS选择器优先级特性，通过通用选择器组合提升禁用样式优先级，同时限制交互状态的作用范围：

优化后的CSS代码 #

button { background-color: #F5F5F5; border-color: #F0F0F0; color: #000; }
button:hover { background-color: #FFF; }
button:active { background-color: #E5E5E5; }

/* 提升禁用样式优先级，覆盖所有带自定义类的禁用按钮 */
button:disabled,
button[class]:disabled {
  background-color: transparent;
  border-color: transparent;
  color: #777;
}

button.primary { background-color: #9F03FF; border-color: #8400DA; color: #FFF; }
/* 仅在非禁用状态下触发交互样式 */
button.primary:hover:not(:disabled) { background-color: #AF2CFF; }
button.primary:active:not(:disabled) { background-color: #7800C1; }

方案说明 #

• 提升禁用样式优先级：button[class]:disabled选择器的优先级（元素选择器+属性选择器+伪类）高于button.primary（元素选择器+类选择器），能直接覆盖自定义类的基础样式，无需为每个颜色类单独编写禁用规则。
• 限制交互状态范围：给自定义类的:hover、:active添加:not(:disabled)，确保禁用状态下不会触发这些交互样式，避免禁用按钮仍有 hover/active 反馈。

这个方案无需重复代码、不用!important，同时满足所有禁用按钮样式统一的需求。

内容的提问来源于stack exchange，提问作者cristian