CSS select 来自 <table> 的 <thead> 或 <tbody>

Question

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

我需要为 thead（如果它在 table 中设置）或 tbody（它始终设置）应用 css。我不应该为他们两个设置样式，只为第一个使用 <table> 标签的人设置样式。

所以如果我有

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

那么 CSS 应该只应用于 thead。

反之亦然，如果我有：

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

那么CSS应该申请tbody

我希望有类似的东西 'if thead is set then...'

Answer 1

如果这是一个选项，您可以使用 :first-child select 或

的 hack

例如，您将 select 其中一个是 <table> 的第一个 child:

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

在这种情况下，如果 thead 存在，tbody 将不是第一个 child。否则，如果没有thead，tbody将是第一个child。

查看实际效果：

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>

CSS select 来自 <table> 的 <thead> 或 <tbody>

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

css

sass

styles

css-tables