TR 中的最后一个 TD 和倒数第二个 TD (CSS / LESS)答案

【问题标题】：Last TD and Second last TD in TR (CSS / LESS)TR 中的最后一个 TD 和倒数第二个 TD (CSS / LESS)
【发布时间】：2013-03-09 14:26:39
【问题描述】：

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

我有一个大约有十几行的表。其中一行如下所示：

<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/

【问题讨论】：

@Perfect Dark：谢谢。

标签： css css-selectors less

【解决方案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

【讨论】：

谢谢！ 太棒了，它有效。感谢您的帮助，让我回到正确的轨道上。我唯一的借口是我做了一些粗心的复制和粘贴工作，如果没有你，我可能无法像刚才那样快速解决这个问题。非常感谢！

【解决方案2】：

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

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

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

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

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

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

【讨论】：

感谢您的帮助。非常感谢您的贡献。