为第一个表行创建CSS，替换其他表

Question

我有一个从另一个应用程序/服务生成的表，我无法修改其布局。我想要CSS第一行有一个样式，然后其他行有交替的样式。主要问题是关于标题和其他行的html没有区别。

<table id="t01">
  <tr>
    <td>Firstname</th>
    <td>Lastname</th> 
    <td>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

我在CSS中看到像table > tr:n-child(odd)这样的东西，但那些不起作用。有没有办法让我说“tr：nth-​​child（ODD EXCEPT WHEN = 1）”？

任何帮助是极大的赞赏。这是我想要完成的事情的快照。

编辑：解决方案

这是我解决的解决方案。关键是将first-child选择器放在nth-child(2n + 1)选择器之后，因此标题样式将覆盖迭代样式。我可能会看看:not选择器，但我想再次滚动。

div#tablewrappingdiv> table > tbody tr:nth-child(2n+1) > td{
    background-color: #eee;
}
div#tablewrappingdiv> table > tbody > tr:first-child > td{
    background-color: #006c00;
}           
div#tablewrappingdiv> table > tbody > tr:nth-child(2n + 2) > td{
    background-color: #d8e4bc;
}

Answer 1

看看Selector Reference for nth-child：

tr:first-child     {darkgreen}  (nth-child(0) would also work)
tr:nth-child(2n+2) {white}
tr:nth-child(2n+3) {lightgreen}

使用公式（an + b）。描述：a表示循环大小，n是计数器（从0开始），b是偏移值。

在这里看到它：https://jsfiddle.net/z8xhs0h1/

---

对于这个相当简单的情况（偶数/奇数，第一个不同），请看看this answer。它稍微容易阅读，并说你只需要将first-child规则放在最后：

tr:nth-child(even) {white}
tr:nth-child(odd)  {lightgreen}
tr:first-child     {darkgreen}  (overrides white color)

但是，对于更复杂的情况或者你想要非常明确的情况，an+b规则可以非常灵活。

Answer 2

你也可以利用这样的东西。

• 我们需要替换偶数行和奇数行，使用nth-child(even/odd)选择器非常合适。
• 因为我们想要exclude the first row（这是一个奇数）你可以使用:not(:first-child) selector with the odd attribute。

#t01 tr:first-child{
background:yellow;
}
#t01 tr:nth-child(even){
background:red;
}
#t01 tr:nth-child(odd):not(:first-child){
background:green;
}

<table id="t01">
  <tr>
    <td>Firstname</td>
    <td>Lastname</td> 
    <td>Age</td>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

Answer 3

您可以使用如下所示的tr:first-child，tr:nth-child(2n+2)和tr:nth-child(2n+3)，其中“nth-child（2n + 3）”表示“从第三个开始的每隔一个孩子”：

tr:first-child {
  background: #fa0;
}

tr:nth-child(2n+2) {
  background: #a0f;
}

tr:nth-child(2n+3) {
  background: #0eb;
}

<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>