html - 使用 CSS :nth-child to create loop with 5 different designs repeated every 5 items

<分区>

我正在尝试实现一个非常具体的网格来展示一些元素。我们的想法是创建一个重复循环，其中包含具有不同样式的第 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 个元素之后循环......

有人对此有绝妙的想法吗？甚至可以仅使用 CSS 吗？

谢谢!

最佳答案

问题在于您如何定义公式。 nth-child 选择器中的公式如下:

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>

关于html - 使用 CSS :nth-child to create loop with 5 different designs repeated every 5 items，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51544693/

上一篇：javascript - Font Awesome 图标选择器在图标旁边显示字体信息文本

下一篇：css - Chrome 上的剪辑路径在边缘留下一条奇怪的线

Python Mechanize 选择一个没有名字的表单

jquery - 全日历自定义设计界面

html - 创建与现有网站不同的移动外观？

css - 如果表格单元格包含大于 "x"的数字，是否可以将其作为第 n 个子单元格？

css - 给标题 margin-top 除非它们与容器 div 齐平？

javascript - 从 PHP 获取 JSON 并以 HTML 显示

javascript - html2canvas打印带有位置绝对值的svg失败

html - IE11 上的粘性页脚

jquery - 为什么这个 css 选择器不能使用很棒的字体