使用交替的行颜色覆盖表格内单行上的行颜色

Question

我有一个CSS3交替行样式的表，但我需要覆盖几行的样式。

以下是该表的CSS：

table.primary tr:nth-child(odd) {
    background-color: #e5e5e5;
}
table.primary tr:nth-child(even) {
    background-color: #ededed;
}

我需要使用非常不同的背景颜色（以及其他格式）覆盖某些行，我希望只为各行添加class=，但似乎这不会覆盖上面的CSS。

e.g。

<table class="primary">
    <tr><td>one</td></tr>
    <tr class="new"><td>two</td></tr>
    <tr><td>three</td></tr>
</table>

或者，我需要跳过CSS3，而只需使用class="row1"，class="row2"，class="new"。

有关如何使用类覆盖nth-child的任何建议吗？

Answer 1

由于类和伪类具有相同的特异性，因此在这样的.new规则之后定义:nth-child()样式规则就足够了，假设单个类是要覆盖所有其他风格：

table.primary tr:nth-child(odd) {
    background-color: #e5e5e5;
}
table.primary tr:nth-child(even) {
    background-color: #ededed;
}
table.primary tr.new {
    background-color: #ffc;
}

jsFiddle demo

Answer 2

试试这个

table.primary tr.new:nth-child(odd) {
background-color: #ff0000;
}
table.primary tr.new:nth-child(even) {
background-color: #000000;
}

Answer 3

你知道你可以将多个css语句放入一个类吗？然后你可以在需要时覆盖！important：）

这是一个JS小提琴

http://jsfiddle.net/dJWR2/

Answer 4

您错过了第二行的开始td标记。

然后按照BoltClock的说明操作：）