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

yxwkf 阅读:149 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.作者投稿可能会经我们编辑修改或补充。

关注我们

一个IT知识分享的公众号