html cols跨两列,html – CSS奇怪,甚至有2个cols

一个模式中有四篇文章,因此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是全等模4,如-2和2所示,因此它们指的是相同的元素(尽管n的值在技术上对于每个元素是不同的).

你甚至可以交换它并将颜色4n和4n 1蓝色(Fiddle)：

article {color:green}

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