一個模式中有四篇文章,因此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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。