Question

假设我有下表（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>

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解决方案。

那么，有没有办法选择元素的堂兄？

Answer 1

CSS在DOM中工作（尽管选择器是向后处理的），因此您无法向上导航元素树然后向下返回以到达元素的表兄弟。您只能在相同级别的元素上操作（仅向前）或向下移动。

你必须使用你的jQuery解决方案。

Answer 2

参考： http://www.w3.org/TR/2009/PR-css3-selectors-20091215/#selectors

不，只有后代和有限的兄弟选择器。你必须使用javascript来定位元素。

CSS - 是否有堂兄选择器？

2 个答案: