我有以下问题。我有很多 tables，但它们都有不同的结构：一个有 <table><thead><tbody> 类型，而其他只有 <table><tbody> 类型。
而且我需要将 css 应用于 thead（如果它在 table 中设置）或应用于 tbody（它始终设置）。我不应该为他们两个都设置 styles ，只为第一个在 <table> 标记之后的人设置。
所以如果我有
<table>
<thead>...</thead>
<tbody>...<tbody>
</table>那么 CSS 应该只适用于 thead。
如果我有，反之亦然：
<table>
<tbody>...</tbody>
<table>那么 CSS 应该应用于 tbody。
我希望有类似'如果设置了thead然后......'
回答1
如果这是一个选项，您可以使用带有 https://developer.mozilla.org/pt-BR/docs/Web/CSS/: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>