5

Google-ingとstackoverflow-ingの後、私はまだこれを解決できませんでした:

約12行のテーブルがあります。行の 1 つが次のようになります。

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

この行の最後の 2 つの 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/

4

2 に答える 2

5

最初のセレクターは次のようになります。

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

そして、2番目のセレクターは次のようになります。

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;
}

ところで、セレクターは複雑すぎます。パフォーマンスはそれを減らす方が良いです。このテーブルのsに.rvw-product-totalクラスがある場合<tr>は、次のセレクターを配置するだけで十分です。

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

セレクターを回して、より適切にサポートされているため:first-child、使用するよりも上書きします。の代わりに省略形のプロパティも含めました。:last-childbackgroundbackground-color

それはあなたのために働くはずです：http：//jsfiddle.net/acegyver/EYVvc/2/

于 2013-02-25T16:02:20.913 に答える