CSS选择＆lt; thead＆gt;或＆lt; tbody＆gt;来自＆lt; table＆gt;

Question

我有以下问题。我有很多桌子，但是它们都有不同的结构：一个具有＆lt; table; ;。

而且我需要将CSS应用于Thead（如果在表中设置）或Toby（始终设置）。我不应该为他们两个设置样式，而只是为第一个追随＆lt; table'标签的样式。

因此，如果我有

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

CSS，则应仅适用于Thead。

反之亦然，如果我有：

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

则应将CSS应用于Tbody。

我希望有类似的东西“如果设置了thead，那么...'

Answer 1

如果是一个选项，则可以使用 ：First-Child 选择器。

例如，您将选择其中一个，这是＆lt; table; table; gt;的第一个孩子：

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

在这种情况下，如果存在thead，则将不是第一个孩子。否则，如果没有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>