CSS - 优先考虑css规则

Question

我有一个带有奇数和偶数行着色的项目表，以获得更好的视图：

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

我还有一个代码，用于检查项目是否延迟，如果是，我将所有项目行用红色（而不是偶数和奇数行的常用颜色）

此外，每行都有一个类，类名取决于项目是否迟到。 课程是：

.redBackground {background-color:#CD5C5C;}

.yellowBackground {background-color:#FFFF00;}

.noBackground {}

问题在于，无论行所属的是什么类，偶数行的css总是＆＃34;胜出＆＃34;所以我从来没有看到红色或黄色的背景。 如何使它工作，所以如果到期日晚，它将显示红色和黄色类，在常规情况下，它将是奇数甚至？

Answer 1

使用较高specificity的选择器，例如

table tr.redBackground {background-color:#CD5C5C;}

Answer 2

您可以使用父选择器，对于您的情况，这应该有效：

tr.redBackground {background-color:#CD5C5C;}

tr.yellowBackground {background-color:#FFFF00;}

或者，

#parent_div .redBackground {background-color:#CD5C5C;}

#parent_div .yellowBackground {background-color:#FFFF00;}

Answer 3

为什么不在java脚本中做这样的事情。假设您知道哪些行用于以后的项目。

if( project is late ){

  document.getElementById("MyElement").className = "redBackground";

}

将默认类保持为奇数和偶数，并且在项目延迟的情况下更改类。假设您不介意以编程方式更改类。

Answer 4

尝试使用!important

.redBackground {background-color:#CD5C5C !important;}

.yellowBackground {background-color:#FFFF00 !important;}