Question

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

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

CSS

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

的JScript

$('.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具有比类更大的权重，类具有比标记名称更大的权重。因此，基于身份的样式会覆盖基于类的样式。

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

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

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

Answer 2

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

Answer 3

ids＆gt;类

您可以使用.calc_no和.calc_yes代替

jQuery / css addClass（）样式覆盖以前的样式属性

3 个答案: