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 $"? Возможно, выбрав второе вхождение элемента? И.Е .: Во второй раз происходит ".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, предполагает ровно два tr с и два td с):

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

Answer 2

Если у вас есть возможность изменить вывод корзины, вы можете добавить класс к тегу <tr>, например. <tr class="row01">, <tr class="row02"> и т. Д.

Если вы не можете изменить свой бэкэнд, тогда это выбор фронт-энда. Наиболее кросс-браузерный метод - использовать jQuery для применения классов строк. Другая альтернатива, CSS3, не поддерживается ни одним текущим IE; учитывая, что это корзина покупок, вы, вероятно, заинтересованы в самом широком уровне поддержки браузеров.

Что-то вроде:

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

В качестве альтернативы, если вас интересует только третий элемент, используйте jQuery так же, как CSS3:

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