CSS select either <thead> or <tbody> from <ta

Question

我有以下问题。我有很多表，但它们都有不同的结构:一个有<table><thead><tbody>类型，而其他只有<table><tbody>类型。

我需要应用css的头部(如果它设置在表)或主体(它总是设置)。我不应该为他们两个设置样式，只有在<table>标签之后的第一个。

所以如果我有

<table>
<thead>...</thead>
<tbody>...<tbody>
</table>

那么CSS应该只应用于head。

反之亦然，如果我有:

<table>
<tbody>...</tbody>
<table>

则body应该应用CSS。

我希望有类似'if head is set then…'的东西

Answer 1

如果这是一个选项，您可以使用:first-child选择器的hack。

例如，您将选择它们中的任何一个，这是<table>的第一个子元素:

table > thead:first-child, table > tbody:first-child{
/* properties here */
}

在这种情况下，如果thead存在，tbody将不会是第一个子节点。否则，如果没有thead,tbody将是第一个子节点。

实际操作:

table > thead tr, /* Select the <tr> in a <thead> if present */
table > tbody:first-child tr:first-child /* Select the first <tr> in a <tbody> when the <thead> is not present */
{
font-weight: bold;
color: blue;
}
table{
margin-top:1em;
border: 1px solid black;
}

<table>
<thead>
<tr><th>This is a table with header</th></tr>
</thead>
<tbody>
<tr><td>This is the body</td></tr>
</tbody>
</table>
<table>
<tbody>
<tr><td>This is a table without header</td></tr>
</tbody>
<tbody>
<tr><td>This is the body</td></tr>
</tbody>
</table>