表中第一行的CSS选择器 [英] css selector for first row in a table

问题描述

我需要一个css选择器，用于< table> 中的第一个< tr> .

I need a css selector for first <tr> in a <table>.

我在互联网上搜索了一些选择器，例如 tr:first-child table *:first-child tr:first-child，表tr:first-child .但是它们对我的情况不起作用...

I had searched on the internet and got some selectors like tr:first-child table *:first-child tr:first-child, table tr:first-child. But they do not works on my situation...

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

Here is a piece of HTML code which need to handle:

<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的解决方案)

(prefer a solution without javascript)

推荐答案

没有任何选择器会在不添加一些区分不同情况的类的情况下为您工作

there isn't any selector that would work for you without adding some classes to distinguish different cases

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

thead tr:first-child would work for first two examples, but it would fail in the 3rd

您还可以尝试类似以下操作:

you could also try something like this:

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

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

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

but if I were you I'd avoid doing that

这篇关于表中第一行的CSS选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！