每两个表行的nth-child

Question

我需要让我的桌子的每两行变灰,如果可能的话我宁愿使用nth-child.

我需要以下公式:

1,2 - grey
3,4 - white
5,6 - grey
7,8 - white
9,10 - grey

等等.我宁愿不在html中放一个类,因为我确信这将成为一些人的建议.如果有办法用n-child来解决这个问题,那就是我正在寻找的东西.

Answer 1

意识到你正在做4组,然后你可以看到你可以拥有每个第4个元素和每个第4个元素减去一个是白色,然后每个第4个元素减去2个,或者每个第4个元素减去3个是灰色.

所以,你会使用4n和4n-1,然后4n-2和4n-3:

div:nth-child(4n), div:nth-child(4n-1) {
    background: red;
}
div:nth-child(4n-2), div:nth-child(4n-3) {
    background: blue;
}

那段代码对你的情况并不准确,我把它写成了一个jsFiddle概念验证.

NB免责声明:请记住,nth-child这在IE8中不起作用.当然是典型的问题.