CSS选择器 - 选择特定的子元素 [英] CSS Selectors - Selecting a specific child element

问题描述

这是我的代码片段：

<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表tbody tr td [colspan ='']？

Is there a way to select the span displaying "$10.00"? Perhaps selecting the 2nd occurrence of an element? I.E.: The second time ".totals table tbody tr td[colspan='']" occurs?

推荐答案

c $ c>：nth-​​child（）很容易满足特定条件：

With CSS3's :nth-child() it's easy to fulfill the "specific" criterion:

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

兼容性（不使用CSS3选择器，假设正好两个 tr 和两个 td ）：

Or, an alternative that works more in favor of browser compatibility (does not use CSS3 selectors, assumes exactly two trs and two tds):

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

这篇关于CSS选择器 - 选择特定的子元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！