CSS：使类优先于元素样式答案

【问题标题】：CSS: Make Class take precedence over Element StylingCSS：使类优先于元素样式
【发布时间】：2014-09-28 20:17:28
【问题描述】：

我不希望使用!important，但如果没有其他方法可以做到这一点，我会这样做。

我有一个 CSS 规则来确定按钮的外观：

input[type=button] {
 font: 24px "TF";
 border-radius: 3px;
 color: white;
 background-color: #005299;
 cursor: pointer;
}

然后，对于某些按钮，当它被点击时，它应该切换一个名为selected 的类。该类应该更改按钮的background-color，但它不会优先于元素样式（颜色不会改变，Firebug 会用删除线显示该类）。如何让selected 类优先？

在极端情况下，我也可以使用 Jquery 切换 css 样式，但我不希望这样做。

【问题讨论】：

input[type=button] 的特异性值高于.selected。看看：stackoverflow.com/questions/21329824/…
@HashemQolami 属性选择器与类选择器具有完全相同的特殊性，但这并不重要，因为问题在于内联样式。（哦等等 - 是的，你是对的，因为它明确包含 input - 所以 input.selected 将是相同的。）
@Pointy 我知道，您错过了获得0,0,1,1 特异性值的input 部分。此外，按钮不会添加任何内联样式。 OP提到：it should toggle a class called selected
是的，我明白了 - 我不是 100% 清楚 OP 所说的“元素样式”是什么意思，但你可能是对的，他的意思是 CSS 实际发布在问题中。

标签： jquery css

【解决方案1】：

因为在您的 DOM 中，唯一一种将“type”属性设置为“button”的元素是 <input> 元素，因此实际上没有必要使用标签名称。尽可能坚持使用最简单的选择器是一个好习惯；在这种情况下，很简单

[type=button] {
  font: 24px "TF";
  /* ... */
}

会工作得很好。然后你可以按照

.selected {
  background-color: green; /* or whatever */
}

并且级联规则会按您的预期工作。

如果你觉得你必须有input 限定符，你可以在类选择器上加倍：

.selected.selected {
  background-color: green; 
}

但这几乎与!important 一样多（我认为没有那么多）。

【讨论】：

【解决方案2】：

您需要使您的覆盖选择器更具体。

例如：

input[type=button].selected

【讨论】：