css - 类后的 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; }

Is that what you're after?

Live example

or in the other syntax:

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

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