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

Question

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

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

CSS

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

j脚本

$('.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>

Answer 1

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

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

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

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