CSS甚至有2个cols

Question

我的HTML是这样的：

<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>

并且在一行中有2篇文章与浮动，我希望他们改变颜色，如：

blue green
green blue
blue green
green blue

我怎么能用css做到这一点？

Answer 1

模式中有四个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
#   COLOR   4n     4n+1    4n+2    4n+3
-- ------  -----  ------  ------  ------
 1  blue    -       0        -        -
 2  green   -       -        0        -
 3  green   -       -        -        0
 4  blue    1       -        -        -
 5  blue    -       1        -        -
 6  green   -       -        1        -
 7  green   -       -        -        1
 8  blue    2       -        -        -
 9  blue    -       2        -        -
10  green   -       -        2        -
11  green   -       -        -        2
12  blue    3       -        -        -
13  blue    -       3        -        -

-1和+3是同等的mod 4，-2和+2也是如此，因此它们引用相同的元素（尽管n的值每种技术都有所不同。

你甚至可以交换它并着色4n和4n+1蓝色（Fiddle）：

article {color:green}
article:nth-child(4n), article:nth-child(4n+1) {color:blue}