表格中第一行的 css 选择器

Question

我需要一个 css 选择器<tr>作为<table>.

我在互联网上搜索并得到了一些选择器，例如tr:first-child table *:first-child tr:first-child, table tr:first-child. 但它们不适用于我的情况......

这是一段需要处理的 HTML 代码：

<table>
  <thead>
    <tr><th>you should chose this row</th></tr>
    <tr><th>not this one</th></tr>
  </thead>
  <tbody>
    <tr><td>not this one</td></tr>
  </tbody>
</table>


<table>
  <colgroup>
    <col></col>
  </colgroup>
  <thead>
    <tr><th>you should chose this row</th></tr>
    <tr><th>not this one</th></tr>
  </thead>
  <tbody>
    <tr><td>not this line</td></tr>
  </tbody>
</table>


<table>
  <colgroup>
    <col></col>
  </colgroup>
  <tbody>
    <tr><td>you should chose this row</td></tr>
    <tr><th>not this one</th></tr>
  </tbody>
</table>

（更喜欢没有javascript的解决方案）

Answer 1

如果不添加一些类来区分不同的情况，就没有任何选择器可以为您工作

thead tr:first-child对于前两个示例可行，但在第三个示例中会失败

编辑：你也可以尝试这样的事情：

thead tr:first-child,
tbody tr:first-child {
    /* your css styles */
}

thead + tbody tr:first-child {
    /* reset css from previous selector */
}

但如果我是你我会避免这样做