如何过滤 tr 最后 child 而不是第一个 child

Question

参见下面的示例。是否可以通过使用 CSS 选择器将底部边框应用于 <thead> 中的 <tr>？

编辑： 这是那里唯一的一行。也有可能根本就没有<thead>和<tbody>。

table {
    border-collapse: collapse;
}
caption, th, td {
    text-align: left;
    line-height: 1.4;
    padding: 8px;
}
tr {
    border-bottom: 1px solid #ccc;
    vertical-align: top;
}
tr:last-child {
    border-bottom: 0;
}

<h2>Tables</h2>
<table>
    <caption>Optional table caption.</caption>
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
        </tr>
    </tbody>
</table>

Answer 1

您可以使用 :not()/:only-child 伪类的组合来防止元素被选中，如果它是唯一的 child:

Updated Example

tr:last-child:not(:only-child) {
    border-bottom: 0;
}

在这种情况下，您还可以将 :only-child 换成 :first-child，因为您想否定第一个 child.

Updated Example

tr:last-child:not(:first-child) {
    border-bottom: 0;
}

您也可以缩小选择器的范围，以便仅选择 tbody 中的 tr 个元素：

Example Here

tbody tr:last-child {
    border-bottom: 0;
}

..或者您可以在 thead..

中的 tr 元素上显式设置 border

Answer 2

thead{border-bottom:1px solid #f00;}

就这么简单

如何过滤 tr 最后 child 而不是第一个 child

How to filter tr last child and not first child

css

css-selectors