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

Question

这是我的代码片段:

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

有没有办法选择显示"$ 10.00"的范围？也许选择元素的第二次出现？IE:第二次出现".totals table tbody tr td [colspan ='']"？

Answer 1

使用CSS3 :nth-child(),很容易实现"特定"标准:

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

或者,一种更有利于浏览器兼容性的替代方案(不使用CSS3选择器,假定恰好是两个trs和两个tds):

#shopping-cart-totals-table > tbody > tr + tr > td + td .price