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}

创作挑战赛新人创作奖励来咯，坚持创作打卡瓜分现金大奖

总结

以上是生活随笔为你收集整理的html cols跨两列,html – CSS奇怪,甚至有2个cols的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。