我的
HTML是这样的：
<article></article> <article></article> <article></article> <article></article> <article></article> <article></article>
并且在一行中有2篇文章与浮动,我希望他们改变颜色,如：
blue green green blue blue green green blue
我怎么能用css做到这一点？
解决方法
一个模式中有四篇文章,因此4n的一些偏移应该可以解决问题.这似乎工作(
Fiddle)：
article {color:blue}
article:nth-child(4n-1),article:nth-child(4n-2) {color:green}
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是全等模4,如-2和2所示,因此它们指的是相同的元素(尽管n的值在技术上对于每个元素是不同的).
你甚至可以交换它并将颜色4n和4n 1蓝色(Fiddle)：
article {color:green}
article:nth-child(4n),article:nth-child(4n+1) {color:blue}
