Question

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

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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;
}

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

Example Here

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

..或者您可以在border中的tr元素上明确设置thead ..

Answer 2

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

就这么简单

如何过滤最后一个孩子而不是第一个孩子

2 个答案: