在具有交替行颜色的表格内，覆盖单个行的行颜色

Question

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

下面是表格的CSS：

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

我需要覆盖一些具有非常不同背景颜色（和其他格式）的行，我希望只需向每个行添加class=，但似乎这并没有覆盖上面的 CSS。

例如：

<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 的建议？

- hyarion

---

你在样式表中为新的类名放了什么代码？只是 .row1 吗？还是 table.primary tr...等等？ - Peter Stuart

Answer 1

由于类和伪类具有相同的特殊性，因此应该足够在:nth-child()规则之后定义.new样式规则，并假设单个类将覆盖所有其他样式：

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演示

- BoltClock

---

谢谢！这解决了问题。在nth-child类之前我有tr.new类。 - hyarion

Answer 2

试一下这个

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

- Swap

Answer 3

你知道你可以将多个CSS语句放入一个类中吗？然后在需要时可以使用!important进行覆盖 :)

这里是一个JS fiddle

http://jsfiddle.net/dJWR2/

- Graeme Leighfield

---

认真的吗？class="odd even" 对于 .even 还要加上 !important 规则？ - BoltClock

我的意思是，把一个元素称作奇数和偶数是毫无意义的。 - BoltClock

只是补充一下，重要的是为了演示，因为OP说其他样式也需要被覆盖。这是一个简单的JS Fiddle。 - Graeme Leighfield

也许我可以稍微改一下名字，但我相信你能明白我的意思 :P - Graeme Leighfield

Answer 4

你漏掉了第二行的开头td标签。

然后按照BoltClock的指示操作 :)

- Jarno Argillander

---

谢谢，那只是一个快速的疏忽，因为打问题时粘贴原始表格会使问题难以阅读，代码太多了。;) - hyarion