CSS隐藏除第一个表以外的所有标题

Question

我试图隐藏所有的<thead></thead>除了第一个表使用以下CSS规则:

@media screen {
.container>table:not(:first-child)>thead {
display: none !important;
}
}

<div class="container">
<div>Table Caption</div>
<table>
<thead></thead>
<tbody></tbody>
</table>
<div>Table Caption</div>
<table>
<thead></thead>
<tbody></tbody>
</table>
<div>Table Caption</div>
<table>
<thead></thead>
<tbody></tbody>
</table>
</div>

但是这个规则隐藏了所有的<thead></thead>。任何帮助吗?

Answer 1

您可以使用:not&表上的:first-of-type伪类和选择它的子thead像下面的例子。这将把CSS应用于除第一个表之外的所有表的thead。

@media screen {
.container>:not(table:first-of-type)>thead {
display: none;
}
}

<div class="container">
<div>Table Caption</div>
<table>
<thead>
<tr>
<td>xyz-head</td>
</tr>
</thead>
<tbody>
<tr>
<td>xyz-body</td>
</tr>
</tbody>
</table>
<div>Table Caption</div>
<table>
<thead>
<tr>
<td>zxc-head</td>
</tr>
</thead>
<tbody>
<tr>
<td>zxc-body</td>
</tr>
</tbody>
</table>
<div>Table Caption</div>
<table>
<thead>
<tr>
<td>esd-head</td>
</tr>
</thead>
<tbody>
<tr>
<td>esd-body</td>
</tr>
</tbody>
</table>
</div>

Answer 2

第一个表不是容器中的第一个子表。

你需要first-of-type

.container>table:not(:first-of-type)>thead {
display: none;
}

<div class="container">
<div>Table Caption</div>
<table>
<thead>
<tr>
<th>thead1</th>
</tr>
</thead>
<tbody></tbody>
</table>
<div>Table Caption</div>
<table>
<thead>
<tr>
<th>thead2</th>
</tr>
</thead>
<tbody></tbody>
</table>
<div>Table Caption</div>
<table>
<thead>
<tr>
<th>thead3</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>

注意-我已经把更完整的标记(你需要tr和标题中的元素来看到正确选择的内容)。