CSS中button:disabled规则为何对ID样式的按钮不生效？

这不是浏览器Bug，是CSS核心的选择器优先级规则导致的必然结果。

CSS选择器优先级权重规则 #

CSS选择器的优先级由权重值决定，权重越高，样式越优先生效：

• ID选择器（如#a）：权重100
• 类选择器、伪类选择器（如.b、:disabled）：权重10
• 元素选择器（如button）：权重1
  多个选择器组合时，权重相加计算总优先级。

对应代码逐一分析 #

1. 按钮A（ID样式）：
   #a的权重是100，而button:disabled是元素选择器(1)+伪类选择器(10)，总权重11。100 > 11，所以#a设置的color:red会覆盖button:disabled的color:gray，禁用后仍显示红色。

2. 按钮B（类样式）：
   .b的权重是10，button:disabled的总权重11。11 > 10，所以button:disabled的灰色会覆盖.b的绿色，禁用后显示灰色。

3. 按钮C：
   单独写的#c:disabled是ID选择器(100)+伪类选择器(10)，总权重110，高于#c的100，所以灰色生效；如果只依赖button:disabled（权重11），优先级远低于#c的100，无法覆盖蓝色，必须单独声明高优先级的#c:disabled才能生效。

解决方法（可选） #

如果想让全局button:disabled规则覆盖ID样式，可以提高其优先级，比如：

button#a:disabled {
  color:gray;
}

或者（不推荐，可能引发样式冲突）：

button:disabled {
  color:gray !important;
}

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