CSS选择器-选择特定的子元素

以下是我的代码片段：

<div class="totals">
        <table id="shopping-cart-totals-table">
    <col />
    <col width="1" />
    <tfoot>
        <tr>
    <td style="" class="a-right" colspan="1">

        <strong>Grand Total</strong>
    </td>
    <td style="" class="a-right">
        <strong><span class="price">$364.99</span></strong>
    </td>
</tr>
    </tfoot>
    <tbody>

        <tr>
    <td style="" class="a-right" colspan="1">
        Subtotal    </td>
    <td style="" class="a-right">
        <span class="price">$354.99</span>    </td>
</tr>
<tr>
    <td style="" class="a-right" colspan="1">

        Shipping & Handling (Flat Rate - Fixed)    </td>
    <td style="" class="a-right">
        <span class="price">$10.00</span>    </td>
</tr>
    </tbody>
</table>

总计
364.99美元
小计
$354.99    
装运和搬运（统一费率-固定）
$10.00    

---

有没有办法选择显示“$10.00”的跨度？可能选择元素的第二个引用？即：第二次“.totals table tbody tr td[colspan='']”发生？

使用CSS3的

：nth-child（）

很容易满足“特定”标准：

#shopping-cart-totals-table > tbody > tr:nth-child(2) > td:nth-child(2) .price

或者，一个更利于浏览器兼容性的替代方案（不使用CSS3选择器，假设正好有两个

tr

s和两个

td

s）：

---

如果您能够更改购物车的输出，则可以向

标记添加一个类，例如

，

等

如果您无法更改后端，则可以选择前端技术。最跨浏览器的方法是使用jQuery应用行类。另一种选择，CSS3，不受任何当前IE的支持；鉴于这是一个购物车，您可能对最广泛的浏览器支持感兴趣

比如：

$('#shopping-cart-totals-table tr').each(function(n){
    $(this).addClass('row'+n);
});

或者，如果您只对第三项感兴趣，请以与CSS3相同的方式使用jQuery：

$('#shopping-cart-totals-table tr:nth-child(2) .price').addClass('highlightClass');

---

您不需要在末尾添加

span

吗？请记住对

&

字符进行编码（

&；

）。

$('#shopping-cart-totals-table tr:nth-child(2) .price').addClass('highlightClass');