每4项交替显示的颜色 [英] Alternate color every 4 items

问题描述

使用纯CSS是否可以创建每隔4个项目交替出现的颜色网格.例如;前4个项目具有蓝色，接下来的4个项目具有红色，然后下4个项目恢复为蓝色，依此类推.

Is it possible with pure CSS to create a color grid that alternates every 4 items. Eg; First 4 items to have blue color, the next 4 to have red and then the next 4 back to blue and so on.

<div>Item 1 = blue</div>
<div>Item 2 = blue</div>
<div>Item 3 = blue</div>
<div>Item 4 = blue</div>
<div>Item 5 = red</div>
<div>Item 6 = red</div>
<div>Item 7 = red</div>
<div>Item 8 = red</div>
<div>Item 9 = blue</div>

有什么想法吗?我知道有nth-child(odd)和even，但不确定在这里有帮助...

Any ideas? I know there is nth-child(odd) and even but not sure that helps here...

推荐答案

可以使用红色的默认规则，也可以使用蓝色的偏移重复规则.

Using a default rule for the red, and a rule that repeats with an offset for the blue it is possible.

8n+1每8个偏移量为1的语法，然后重复此操作以得到1到4.

The syntax of 8n+1 every 8 offset by 1, and then this is repeated to get 1 through 4.

div {
  color: red;
}

div:nth-child(8n+1),
div:nth-child(8n+2),
div:nth-child(8n+3),
div:nth-child(8n+4) {
  color: blue;
}

<div>Item 1 = blue</div>
<div>Item 2 = blue</div>
<div>Item 3 = blue</div>
<div>Item 4 = blue</div>
<div>Item 5 = red</div>
<div>Item 6 = red</div>
<div>Item 7 = red</div>
<div>Item 8 = red</div>
<div>Item 9 = blue</div>

这篇关于每4项交替显示的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！