Question

首先，我无法控制标记，我只是在设计这个。

我有一个包含一系列行的表，有些行按连续顺序排列。我已经能够选择系列的第一个元素，但无法选择最后一个元素。

有什么想法吗？

以下是一个例子：

<table>
    <tr class="parent">
        <td></td>
    </tr>
    <tr class="parent">
        <td></td>
    </tr>
    <tr class="child">
        <td></td>
    </tr>
    <tr class="child">
        <td></td>
    </tr>
    <tr class="parent">
        <td></td>
    </tr>
    <tr class="child">
        <td></td>
    </tr>
    <tr class="child">
        <td></td>
    </tr>
    <tr class="child">
        <td></td>
    </tr>
    <tr class="parent">
        <td></td>
    </tr>
</table>

我选择每个子系列的第一个元素的css是：

table tr.parent + tr.child

我不能使用jQuery !!!!这必须是纯CSS！

Answer 1

如果您的浏览器支持CSS 3选择器，请使用它们（请参阅http://caniuse.com/#feat=css-sel3）

根据W3C docs，您可以使用以下内容：

tr.parent:last-of-type

Answer 2

使用：last-child选择器。例如：

table tr:last-child

这将选择每个tr，它是其父级中的最后一个元素;在这种情况下，表格中的最后一个tr。更多相关信息：https://developer.mozilla.org/en-US/docs/CSS/:last-child

+是相邻的子选择器，在您的示例中，将选择任何tr.parent作为其前一个兄弟的tr.parent。更多相关信息：https://developer.mozilla.org/en-US/docs/CSS/Adjacent_sibling_selectors

选择tr系列的每个最后一个元素

2 个答案: