5

在 Google 和 stackoverflow 之后，我仍然无法解决这个问题：

我有一张大约有十几行的桌子。其中一行如下所示：

<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整行的绿色。

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

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

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

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

4

2 回答 2

5

第一个选择器应该是：

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)

小提琴

于 2013-02-25T16:02:27.433 回答
3

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

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

顺便说一句，你的选择器太复杂了。降低它对性能更好。如果您只是在<tr>此表的 s 上有 .rvw-product-total 类，则放置以下选择器就足够了：

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

我转动了选择器并覆盖了而:first-child不是使用:last-child，因为它得到了更好的支持。我还包括了速记属性background而不是background-color.

这应该适合你：http: //jsfiddle.net/acegyver/EYVvc/2/

于 2013-02-25T16:02:20.913 回答