jQuery / css addClass() 样式覆盖以前的样式属性答案

【问题标题】：jQuery / css addClass() style overriding previous style propertyjQuery / css addClass() 样式覆盖以前的样式属性
【发布时间】：2011-05-13 04:16:45
【问题描述】：

我有一个 div，它的默认类给它一个绿色背景。按下鼠标时，我想将背景更改为红色，直到松开鼠标。

我试图添加一个带有红色背景颜色的类。新的类属性似乎不会覆盖现有属性。我在 .css 文件中的原始类之后列出了新类。

css

#calc_no { background-color: #cd9781; }
#calc_yes { background-color: #8fba8e; }
.button_click { background-color: red; }

脚本

$('.button').live('mousedown', function() {
    $(this).addClass("button_click");
});
$('.button').live('mouseup', function() {
    $(this).removeClass('button_click');
});

html

<div id="calc_yes" class="kp_button button">Yes</div>

【问题讨论】：

标签： jquery css background-color addclass

【解决方案1】：

在 CSS 中，不同类型的选择器具有不同的权重。例如，一个 id 比一个类具有更大的权重，后者比一个标签名称具有更大的权重。因此，您的基于 id 的样式将覆盖基于类的样式。

对于这种简单的情况，请尝试使用!important 关键字：

.button_click { background-color: red !important; }

http://www.w3.org/TR/CSS2/cascade.html#specificity

【讨论】：

这是一个正确的答案，但使用!important 应该是最后的解决方案，因为它会破坏级联规则并导致以后维护代码时出现问题。

【解决方案2】：

问题在于 id 会覆盖类定义。更改类中的背景而不是 ids

【讨论】：

也感谢 aletzo，他首先得到了它（当我在写我的时候）。 upvotes 是在 Stack Overflow 中表达想法的好方法。祝你编码好运，水手！

【解决方案3】：

ids > 类

您可以改用 .calc_no 和 .calc_yes

【讨论】：