css – 每两个表行的第n个子代

前端之家收集整理的这篇文章主要介绍了css – 每两个表行的第n个子代前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我需要使我的表格的每两行灰色,如果可能,我宁愿使用第三个孩子。

我已经搞乱了Chris Coyier’s nth-child tester,但仍然无法得到它。

我需要以下公式:

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

等等。我不想把一个类放在html中,因为我确信这将是一些建议。如果有办法把这个与第n个孩子拉下来,那就是我要找的东西。

解决方法

意识到你正在做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 proof-of-concept

NB免责声明:请记住,第n个孩子在IE8中不起作用。典型的问题当然是。

猜你在找的CSS相关文章