jquery - CSS:使类优先于元素样式

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

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

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

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

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

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

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

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

但这几乎和 !important 一样多。 (我认为没有那么多)。