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

yxwkf 阅读：182 2024-06-20 12:54:19 评论：0

这是我的代码片段:

<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”的跨度？也许选择元素的第二次出现？即:第二次出现“.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 和两个 td):

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

标签:CSS

声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。