css选择器特定值标准,CSS选择器 - 选择特定的子元素

Here is my code snippet:

这是我的代码片段:

Grand Total	$364.99
Subtotal	$354.99
Shipping & Handling (Flat Rate - Fixed)	$10.00

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?

有没有办法选择显示“$ 10.00”的范围?也许选择元素的第二次出现? I.E。:第二次“.totals table tbody tr td [colspan ='']”出现了吗?

2 个解决方案

#1

8

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

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

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

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

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

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

#2

1

If you have the ability to change the output of the shopping cart, you could add a class to the

tag, e.g. , , etc.

如果您能够更改购物车的输出,则可以在标签中添加一个类,例如,等

If you can't change your back-end, then it's a choice of front-end tech. The most cross-browser method is to use jQuery to apply the row classes. The other alternative, CSS3, isn't supported by any current IE; given that this is a shopping cart, you're probably interested in the widest level of browser support.

如果你不能改变你的后端,那么它就是前端技术的选择。最跨浏览器的方法是使用jQuery来应用行类。任何当前的IE都不支持另一种替代方案CSS3;鉴于这是一个购物车,您可能对最广泛的浏览器支持感兴趣。

Something like:

$('#shopping-cart-totals-table tr').each(function(n){

$(this).addClass('row'+n);

});

Alternatively, if you're only interested in the third item, use jQuery in the same way as CSS3:

或者,如果您只对第三项感兴趣,请以与CSS3相同的方式使用jQuery:

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