如何不使用!important通过自定义类覆盖通用按钮的CSS样式

嘿，这个问题其实核心是CSS选择器优先级的问题，完全不用依赖!important就能解决！

你现在遇到的问题是：通用按钮样式用了input[type="button"]这种属性选择器，它的优先级比单纯的类选择器（比如.thirdButton）要高，所以你的小按钮样式被通用样式覆盖了。要解决这个，只需要提升小按钮选择器的优先级就行——把类选择器和属性选择器结合起来，让它的优先级超过通用样式。

修改后的小按钮样式 #

input[type="button"].thirdButton,
input[type="button"].thirdButton:active { 
  width: 28px; 
  padding: 0; 
  background-position-x: 50%; 
}

为什么这样有效？ #

CSS优先级是按「行内样式 > ID选择器 > 类/属性/伪类选择器 > 元素选择器」的规则计算权重的：

• 原通用样式选择器 input[type="button"] 的权重是 0,0,1,1（1个属性选择器 + 1个元素选择器）
• 修改后的小按钮选择器 input[type="button"].thirdButton 的权重是 0,0,2,1（1个属性选择器 + 1个类选择器 + 1个元素选择器）
• 权重更高的样式会自动覆盖低优先级的规则，完全不需要!important

扩展：处理1/2宽度的按钮 #

如果还有需要1/2宽度的按钮（比如类名为.halfButton），用同样的逻辑即可：

input[type="button"].halfButton,
input[type="button"].halfButton:active { 
  width: 86px; /* 172px的一半 */
  padding: 0; /* 根据需求调整其他样式 */
}

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