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;
}