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

Question

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

编辑:这是唯一的一行。也有可能没有<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伪类，以防止选择元素(如果它是唯一的子元素):

Updated Example

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

在这种情况下，您还可以将 :only-child 替换为 :first-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。..