html - 使用 CSS :nth-child 创建循环，每 5 个项目重复 5 个不同的设计

Question

我正在尝试实现一个非常具体的网格来展示一些项目。这个想法是创建一个重复循环，其中包含具有不同样式的第 1、第 2、第 3、第 4 和第 5 个项目（然后样式重复）。

例如：第 1 个红色背景/第 2 个蓝色背景/第 3 个绿色背景/第 4 个黄色背景/第 5 个黑色背景，它会循环显示项目的数量（可能是 5 或 28）。因此，您将拥有：#1 红色 / #2 蓝色 / #3 绿色 / #4 黄色 / #5 黑色 / #6 红色 / #7 蓝色 / #8 绿色 / #9 黄色等

我想使用纯 CSS 来创建这个循环。我使用 webflow，因此内容在列表中 1 接 1 填充，我需要根据列表中的位置调整基本样式。

到目前为止我尝试过的是像这样使用 nth-child ：

.collection-list:nth-child(2n) .collection-item {}
.collection-list:nth-child(3n) .collection-item {}
.collection-list:nth-child(4n) .collection-item {}
.collection-list:nth-child(5n) .collection-item {}

它适用于前 5 个项目……但是……我的问题是，它似乎并不完全像循环一样工作……我想这是因为 2n 和 3n 有时会发生冲突（例如，当您有 2*3 时）。而且我不能对 nth-child 使用奇数和偶数，因为我的想法是让它仅在 5 个项目之后循环......</p>

有没有人对此有一个天才的想法？仅使用 CSS 是否有可能？

谢谢！

标签： htmlcsscss-selectors

Answer 1

问题是你如何定义公式。第 n 个子选择器中的公式如下：

nth-child(an+b)

其中 a 是循环的大小（在您的情况下为 5），b 是偏移值（或模数）。

这是一个工作片段：

.collection-list:nth-child(5n+0) .collection-item {background-color: red;}
.collection-list:nth-child(5n+1) .collection-item {background-color: blue;}
.collection-list:nth-child(5n+2) .collection-item {background-color: green;}
.collection-list:nth-child(5n+3) .collection-item {background-color: yellow;}
.collection-list:nth-child(5n+4) .collection-item {background-color: purple;}

<div class="collection-list"><div class="collection-item">1</div></div>
<div class="collection-list"><div class="collection-item">2</div></div>
<div class="collection-list"><div class="collection-item">3</div></div>
<div class="collection-list"><div class="collection-item">4</div></div>
<div class="collection-list"><div class="collection-item">5</div></div>
<div class="collection-list"><div class="collection-item">6</div></div>
<div class="collection-list"><div class="collection-item">7</div></div>
<div class="collection-list"><div class="collection-item">8</div></div>
<div class="collection-list"><div class="collection-item">9</div></div>
<div class="collection-list"><div class="collection-item">10</div></div>