CSS - 有没有表兄选择器？ [英] CSS - is there a cousin selector?

问题描述

假设我有下表（ JS Fiddle ）：

 < table class =data-table> 
< thead> 
< tr> 
< th scope =col>方法< / th> 
< th scope =col>价格< / th> 
< / tr> 
< / thead> 
< tbody> 
< tr> 
< td> Pickup *< / td> 
< td>免费< / td> 
< / tr> 
< tr> 
< td>校园邮件< / td> 
< td>免费< / td> 
< / tr> 
< / tbody> 
< tfoot> 
< tr> 
< td colspan =2> *在一楼的办公桌< / td> 
< / tr> 
< / tfoot> 
< / table> 
  

TBODY的行已使用：nth-​​child（2n）选择器进行斑马条纹。但是TFOOT中的行的背景不会得到这些样式，并且在TBODY中的表具有偶数行时打破偶数/奇数条带。

我想选择类似 .data-table tbody tr：nth-​​child（2n）：last-child + tr 的TFOOT行，不工作。 + 选择器适用于共享单个父元素的相邻兄弟元素。这两个TR不是兄弟姐妹，他们是表兄弟。

我可以使用jQuery（类似 $ （.data-table tbody tr：nth-​​child（2n）：last-child）parent（）。next（）。find（tr）。css（{background-color：blue} ））。但是我喜欢CSS解决方案，如果有一个。

那么，有没有办法选择一个元素的表兄弟？

您必须使用jQuery解决方案。

Suppose I have the following table (JS Fiddle):

<table class="data-table">
<thead>
    <tr>
        <th scope="col">Method</th>
        <th scope="col">Price</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Pickup*</td>
        <td>no charge</td>
    </tr>
    <tr>
        <td>Campus mail</td>
        <td>no charge</td>
    </tr>
</tbody>
<tfoot>
    <tr>
        <td colspan="2">* At 1st floor desk</td>
    </tr>
</tfoot>
</table>

The rows of the TBODY have been zebra striped using an :nth-child(2n) selector. But the background of the row in the TFOOT doesn't get those styles, and breaks the even/odd striping any time the table has an even number of rows in the TBODY.

I'd like to select the TFOOT row with something like .data-table tbody tr:nth-child(2n):last-child + tr, but that won't work. The + selector is for adjacent sibling elements that share a single parent element. The two TRs here aren't siblings, they're cousins.

I could use jQuery (something like $(".data-table tbody tr:nth-child(2n):last-child").parent().next().find("tr").css({"background-color": "blue"})). But I'd prefer a CSS solution if there is one.

So, is there any way to select an element's cousin?

解决方案

CSS works down the DOM (although selectors are processed backwards), so you can't navigate up an element tree and then back down to reach an element's cousin. You can only either operate on the same level of elements (only going forward), or go down.

You'll have to go with your jQuery solution.

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