我的
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}