HTML / CSS3表行:前2行为白色,后2行为灰色,然后是2再次为白色,依此类推?

时间:2012-09-12 12:47:45

标签: html css css3 css-selectors

  

可能重复:
  nth-child for every two table rows

我正在努力进入CSS3 nth-child选择器,但似乎我现在无法让它工作。

我想要做的是将表格中的前2行设为白色,然后将下2行设为灰色,然后再将2显示为白色,依此类推。我如何仅使用CSS?

非常感谢!

1 个答案:

答案 0 :(得分:5)

经过一些小小的摆弄(字面意思)后,我终于找到了答案:

CSS:

tr:nth-child(4n+0), tr:nth-child(4n-1) {
    background-color: grey;
}​

演示:http://jsfiddle.net/SO_AMK/3e4Fz/

这将选择从0开始的每第4行和-1,您可以使用nth-child(4n-2)nth-child(4n-3)来定位其间的行。

演示:http://jsfiddle.net/SO_AMK/nGSfz/