我的HTML代码如下：
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
有两篇文章在一行上，使用浮动排列，我希望它们的颜色变为以下顺序：
蓝 绿 绿 蓝 蓝 绿 绿 蓝
我该如何使用CSS来实现这个效果？
CSS奇偶性和2列布局
6
- Andreas
2
喜欢蓝色和绿色的棋盘格吗？ - Mooseman
只是为了帮助问题，我相信这就是他想要的模式：http://codepen.io/mrchris/pen/bigeK。我已经使用了类，使用nth-child的解决方案会更好。 - Chris
1个回答
9
一个模式中有四个 article，因此一些偏移量为 4n 应该可以解决问题。这似乎有效（Fiddle）：
article {color:blue}
article:nth-child(4n-1), article:nth-child(4n-2) {color:green}
如果您不喜欢减号，加号同样有效（Fiddle）：
article {color:blue}
article:nth-child(4n+2), article:nth-child(4n+3) {color:green}
仅为了解释整个逻辑，这是一个移动4n模式的问题：
4n-3 4n-2 4n-1 # 颜色 4n 4n+1 4n+2 4n+3 -- ------ ----- ------ ------ ------ 1 蓝色 - 0 - - 2 绿色 - - 0 - 3 绿色 - - - 0 4 蓝色 1 - - - 5 蓝色 - 1 - - 6 绿色 - - 1 - 7 绿色 - - - 1 8 蓝色 2 - - - 9 蓝色 - 2 - - 10 绿色 - - 2 - 11 绿色 - - - 2 12 蓝色 3 - - - 13 蓝色 - 3 - -
-1和+3在模4意义下同余，-2和+2也是如此，因此它们指的是相同的元素（尽管对于每个元素，n的值在技术上是不同的）。
你甚至可以交换并将4n和4n+1标为蓝色（Fiddle）：
article {color:green}
article:nth-child(4n), article:nth-child(4n+1) {color:blue}
- lc.
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接