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 */