問題描述

假設我有下表(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 中有偶數行，就會破壞偶數/奇數條帶.

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.

我想選擇帶有 .data-table tbody tr:nth-child(2n):last-child + tr 之類的 TFOOT 行，但這不起作用.+ 選擇器用于共享單個父元素的相鄰兄弟元素.這里的兩個TR不是兄弟姐妹，他們是堂兄弟.

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.

我可以使用 jQuery(類似于 $(".data-table tbody tr:nth-child(2n):last-child").parent().next().find("tr").css({"background-color": "blue"})).但如果有的話，我更喜歡 CSS 解決方案.

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 在 DOM 中工作(盡管選擇器是向后處理的)，因此您不能向上導航元素樹，然后再向下導航到元素的表親.您只能在同一級別的元素上操作(僅向前)，或者向下.

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.

你必須使用你的 jQuery 解決方案.

You'll have to go with your jQuery solution.

這篇關于CSS - 有表親選擇器嗎?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！