课后的CSS兄弟姐妹

Question

我现在可以通过以下方式获得斑马表：

tbody
  tr:nth-child(2n+2)
    background-color: #f3f7f9

  tr:nth-child(2n+1)
    background-color: #fff

  tr.row-headers + tr
    background-color: #fff

  tr.row-headers + tr + tr
    background-color: #f3f7f9

对于tr.row-headers之后的行，我能够分别使用“+ tr”和“+ tr + tr”强制第一行为#fff而第二行为＃f3f7f9，但是我不希望必须为以下的其余行执行此操作。我尝试了nth-child（2n + 1）和nth-child（2n + 2）而不是“+ tr”方法，但这似乎不起作用。有任何想法吗？

Answer 1

tr:nth-child(even) { background-color: #fff; }

tr:nth-child(odd) { background-color: #f3f7f9; }

这就是你要追求的吗？

Live example

或其他语法：

tbody
  tr:nth-child(even)
    background-color: #f3f7f9

  tr:nth-child(odd)
    background-color: #fff