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}

使用公式（a + 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>

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

3 个答案: