我有一个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有很好的理解,但这对我的大脑有点伤害,所以提前感谢任何帮助!
答案 0 :(得分:11)
看起来你正在制作一个简单的棋盘格,所以如果你把每件东西都设置成绿色,你只需要覆盖所有需要蓝色的东西。 nth-child
can also accept a fomula that gives an n
or multiple of n
with an offset
如果您对它们进行了编号,请注意,在右侧列中,您有4
和8
(下一个将是12
),因此您需要每个第4个元素,并且在左侧您有1
和5
(下一个是9
),因此您还需要第4个加1(技术上为1 4*0+1
)。
There is a fiddle here that demos it,但相关代码是:
/* 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;
}
并给出:
答案 1 :(得分:-2)
你应该像这样使用nth-child
div:nth-child(1){…your code here…}
div:nth-child(2){…your code here…}
div:nth-child(3){…your code here…}
div:nth-child(4){…your code here…}
div:nth-child(5){…your code here…}
div:nth-child(6){…your code here…}
div:nth-child(7){…your code here…}
div:nth-child(8){…your code here…}
通过这个你可以对你的8个div元素做任何事情。