css - 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"，背景颜色不会改变。

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

谢谢！

score 8 · Accepted Answer

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

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

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

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

score 1 · Accepted Answer

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

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

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

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

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

...或者您可以更具体地确定悬停颜色类的范围：

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

2 回答 2