为第一个表行创建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

查看选择器参考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/

对于这个相当简单的情况(偶数/奇数,第一个不同),请看一下这个答案.它稍微容易阅读并说你只需要将first-child规则放在最后:

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

但是,对于更复杂的情况或者如果您想要非常明确,an+b规则可以非常灵活.