表格中第一行的css选择器答案

【问题标题】：css selector for first row in a table表格中第一行的css选择器
【发布时间】：2017-05-23 13:44:45
【问题描述】：

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

我在互联网上搜索并获得了一些选择器，例如 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 的解决方案）

【问题讨论】：

所有的孩子中都没有第一个孩子的 css 选择器。然而，我想说（不知道您的确切用例）可能存在语义上的考虑，这将导致您放弃 <thead> 和 <tbody> 区分。如果您需要第一个<td> 的样式，这对我来说意味着该行在某种程度上具有相同的含义，这与您将它们放在<thead> 和<tbody> 中的事实相冲突。我建议你选择<thead>或<tbody>，因为它们需要相同的样式，它们也必须具有相似的含义。

标签： html css css-selectors html-table

【解决方案1】：

table tr:first-of-type

应该可以。第一个孩子经常被误解。它不太关心“：”之前的元素，它只关注“该元素的第一个子元素是什么？”。如果它恰好与“：”之前相同，则一切正常。但如果不是，就像你的情况一样，什么也不会发生。所以，在大多数情况下，写类似的东西更有用

table > :first-child

这对您的情况没有帮助，但我认为这是使用 :first-child （或一般 *-child ）的最佳方式。如果你想获得一个元素的第一次出现， :first-type 是你的答案。

更新我在另一个问题中看到了这一点：如果您不想要 thead 的行，您当然需要使用 tbody 作为父元素。

tbody tr:first-of-type

或

tbody > :first-child

【讨论】：

正如我对另一个现已删除的答案所评论的，tr:first-of-type “将匹配每个 thead 和 tbody 中的每个第一个 tr。它与 tr:first-child 基本相同。”
还有，那是我很久没见过的照片了。我得把我的《黑与白》翻出来再玩一遍。
当时是一款不错的游戏，我同意 ;) tr:first-child 并不总是与 tr:first-of-type 相同。第一个孩子也可以是 thead 或 colgroup。但我更新了我的答案，使其更加准确。
tr 绝不是 HTML DOM 中 table 的子项，请参阅stackoverflow.com/questions/5568859/… 至于您的更新，这将与第二个示例中的 tbody > tr 匹配，它不应该匹配，因为之前有一个thead身体。
啊，我从没试过桌子 > :*-child for tr.现在我更好地理解了你的第一条评论。刚刚做了一个快速测试，:first-of-type 真的匹配 thead 和 tbody。应该花更多的时间来测试自己。嗯，让我们重新考虑一下解决方案...

【解决方案2】：

如果表中的第一行组是thead 或tbody，并且假设您的表将拥有的唯一子项是colgroup、thead 和tbody：

thead:first-child > tr:first-child,
tbody:first-child > tr:first-child,
colgroup + thead > tr:first-child,
colgroup + tbody > tr:first-child

（如果第一行组可能是 tfoot，则将适当的选择器添加到列表中。无论哪种方式，您都需要所有这些选择器才能覆盖所有基。）

【讨论】：

【解决方案3】：

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

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 */
}

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

【讨论】：

现在这似乎是该案例的整体最佳解决方案。