CSS：Make Class优先于Element Styling

Question

我不想使用!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样式，但我不愿意。

Answer 1

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

例如：

input[type=button].selected

Answer 2

因为你的DOM中只有一种元素会有＆＃34;类型＆＃34;属性设置为＆＃34;按钮＆＃34;是<input>元素，使用标记名称并不是必需的。坚持使用最简单的选择器是一种很好的做法;在这种情况下，只是简单

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

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

来关注它

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

并且级联规则可以按预期工作。

如果您认为必须拥有input限定符，则可以在类选择器上加倍：

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

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