Question

Google-ing和stackoverflowing之后，我仍然无法解决这个问题：

我有一张十几排的桌子。其中一行看起来像这样：

<tr class="rvw-product-total">
    <td colspan="2"></td>
    <td>Total:</td>
    <td>$180.67</td>
</tr>

此行中的最后两个TD（总计和$ 180.67）应该有绿色background-color和bold文字。

所以我可以像CSS / LESS一样完成这项工作：

tr[class="rvw-product-total"]:last-child td, tr[class="rvw-product-total"]:nth-child(n+2) td {
    font-weight: bold;
    background-color: #DFF0D8;
}

这使得整行的background-color变为绿色。

然后我尝试将第一个TD的background-color明确设置为白色，如下所示：

tr[class="rvw-product-total"]:first-child td {
    background-color: #fff;
}

但是整行仍然是绿色background-color，我只是好奇我在这里做错了什么？

以下是关于jsfiddle的快速演示：http://jsfiddle.net/acegyver/EYVvc/2/

Answer 1

第一个选择器应为：

table.prod-rvw-tbl tr[class="rvw-product-total"] td:last-child,

第二个选择器应该是：

table.prod-rvw-tbl tr[class="rvw-product-total"] td:nth-child(n + 2)

Fiddle

Answer 2

您应该将最后一个选择器上的:first-child移至td。

table.prod-rvw-tbl tr[class="rvw-product-total"] td:first-child {
    background-color: #fff;
}

顺便说一下，你的选择器太complex了。性能降低更好。如果您在此表的<tr>上只有.rvw-product-total class，那么放置以下选择器就足够了：

.rvw-product-total td:first-child {}

我转动了选择器并覆盖:first-child而不是:last-child，因为它是better supported。我还包括速记属性background，而不是background-color。

这应该对你有用：http://jsfiddle.net/acegyver/EYVvc/2/

TR中的最后TD和第二个TD（CSS / LESS）

2 个答案: