CSS背景颜色优先级

Question

我正在使用jQuery更改表格行的颜色，我注意到在以下实例中我会得到不同的结果。

CSS如下：

.normalcolor {
    background-color: #dedede;
}
.reddishcolor {
    background-color: #ffc59c;
}
.hovercolor {
    background-color: #f1e1c0;
}

现在，我正在使用此代码执行jQuery的悬停效果：

$("table.withhover tr").hover(function(){
    $(this).addClass("hovercolor");
}, function(){
    $(this).removeClass("hovercolor");
});

奇怪的是，当我将鼠标悬停在class="normalcolor"的行上时，背景颜色会变为.hovercolor的颜色。但是，当我用class="reddishcolor"悬停一行时，背景颜色不会改变。

这是正常的吗？如果是，为什么？它与颜色有什么关系？

谢谢！

Answer 1

您是否按照该顺序指定了CSS类，还是最后指定的.reddishcolor类？

当多个样式应用于元素时，将使用最具体的规则。如果规则具有同等特定性（如您的情况），则使用最新规则。

如果无法更改CSS规则的顺序，可以使悬停类更具体，例如同时指定元素名称：

tr.hovercolor {
  background-color: #f1e1c0;
}

Answer 2

您必须删除定义默认颜色的旧CSS类，然后添加定义悬停颜色的新类：

$().hover(function ()
{
    $(this).removeClass("default-color-class").addClass("hover-color-class");
});

...或者您可以使用!important CSS关键字，以使您的悬停颜色类优先于附加到元素的其他类：

.hover-state { color: #fff !important; }

注意：IE6和FireFox 1.X不支持!important关键字。

...或者你可以在你的悬停颜色类的范围内更具体：

.default-state { ... };
table .hover-state { ... }; /* more specific rules override less specific ones */