末TD和倒數第二個TD在TR（CSS/LESS）

後谷歌-ING和計算器-ING，我仍然沒有能夠解決這個問題之一：末TD和倒數第二個TD在TR（CSS/LESS）

我有一個表約十幾行。一個行看起來是這樣的：

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

最後兩個達陣該行（Total和$ 180.67）中應該有一個綠色background-color和bold文本。

這樣我就可以得到這個CSS實現/更少，像這樣：

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/

來源

2013-02-25 Ace

@完美黑暗：謝謝。 – Ace 2013-02-25 17:19:39

中的第一選擇應該是：

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

來源

2013-02-25 16:02:27 Adrift

**謝謝！**太棒了，它的工作原理。感謝您的幫助，讓我重新回到正確的軌道上。我唯一的藉口是我做了一些粗心的複製和粘貼，沒有你，我可能不會像我剛剛那樣快地解決這個問題。曼尼謝謝！ – Ace 2013-02-25 16:12:38

你是應該在你的最後選擇移動:first-child到td。

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

順便說一句，你的選擇器也是complex。降低性能會更好。如果你只是有.rvw-產品總類上<tr> s此表的，比它足以把以下選擇：

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

我把選擇和覆蓋:first-child比使用:last-child，因爲它是better supported 。我還包括速記屬性background而不是background-color。

這應該爲你工作：http://jsfiddle.net/acegyver/EYVvc/2/

來源

2013-02-25 16:02:20

謝謝你的幫助。我非常感謝你的貢獻。 – Ace 2013-02-25 16:13:21

末TD和倒數第二個TD在TR（CSS/LESS）

回答

相關問題