我的HTML代码如下:
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
有两篇文章在一行上,使用浮动排列,我希望它们的颜色变为以下顺序:
蓝 绿 绿 蓝 蓝 绿 绿 蓝
我该如何使用CSS来实现这个效果?
我的HTML代码如下:
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
有两篇文章在一行上,使用浮动排列,我希望它们的颜色变为以下顺序:
蓝 绿 绿 蓝 蓝 绿 绿 蓝
我该如何使用CSS来实现这个效果?
一个模式中有四个 article
,因此一些偏移量为 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 # 颜色 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}