我有一个 div 元素列表，当前使用 CSS 浮动在两列中显示。我想“替换”这些元素的边框颜色。我在引号中使用了交替，因为我真正想要的是每个“行”中的两个 div 交替。下面是我想要的最终状态的示例：
1blue 2green
3green 4blue
5blue 6green
7green 8blue
如果我只是使用 nth-child(even) 或 nth-child(odd)，我会在每列中垂直获得相同的颜色，如下所示：
1blue 2green
3blue 4green
5blue 6green
7blue 8green
我想要定位的 div 位于 WordPress 循环内，因此我对标记没有太多控制权（这就是我希望使用 CSS nth-child 的原因）。不幸的是，没有任何标记可以让我定位每个单独的“行”。
是否有任何类型的第 n 个孩子模式可以让我做类似的事情blue[1], green[2],blue[2],etc对于无限数量的项目？
我通常对 CSS 有很好的理解，但这有点伤害我的大脑，所以提前感谢您的帮助！
看起来您正在制作一个简单的棋盘，因此如果您将所有内容设置为绿色，则只需覆盖所有需要为蓝色的内容即可。nth-child也可以接受给出一个公式n或多个n有偏移量 http://css-tricks.com/how-nth-child-works/.
当您对它们进行编号时，请注意在右栏中您有4 and 8（接下来是12），所以你需要每第四个元素，在左边你有1 and 5（接下来是9），所以你还需要第四个加一（技术上1是4*0+1).
这里有一个小提琴可以演示它 http://jsfiddle.net/tw7ncwka/，但相关代码是：
/* 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;
}
并给出：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
