使用CSS选择器制作棋盘图案

Question

我有一个div元素列表,我目前正在使用CSS float在两列中显示.我想"替代"这些元素的边框颜色.我在引号中使用了替换,因为我真正想要的是每个"行"中的两个div交替.下面是我想要的最终状态示例:

1blue   2green
3green  4blue
5blue   6green
7green  8blue

如果我只是使用nth-child(偶数)或nth-child(odd),我会在每列中垂直获得相同的颜色,如:

1blue 2green
3blue 4green
5blue 6green
7blue 8green

我想要定位的div位于一个WordPress循环中,所以我对标记没有很多控制(这就是为什么我希望使用CSS nth-child).不幸的是,没有任何标记可以让我针对每个"行".

是否有任何类型的n-child模式可以让我做一些像blue[1], green[2],blue[2],etc无限数量的项目？

我通常对CSS有很好的理解,但这对我的大脑有点伤害,所以提前感谢任何帮助!

Answer 1

看起来你正在制作一个简单的棋盘格,所以如果你把每件事都设置为绿色,你只需要覆盖所有需要蓝色的东西.nth-child也可以接受给出一个n或多个n偏移量的公式.

正如你对它们进行了编号一样,请注意在右列中你有(4和8下一个12),所以你需要每个第4个元素,在左边你有1和5(下一个将是9),所以你还需要第4个加1( 1是技术上的4*0+1).

这里有一个小提琴演示,但相关的代码是:

/* Color everything green */
.checkerboard div {
    width:45%;
    display:inline-block;
    background-color:green;
}

/* Then color the appropriate divs blue */
.checkerboard div:nth-child(4n+1),
.checkerboard div:nth-child(4n) {
    background-color:blue;
}

并给出: