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

Question

I\xe2\x80\x99m 试图实现一个非常具体的网格来展示一些项目。这个想法是创建一个重复循环，其中第一个、第二个、第三个、第四个和第五个项目具有不同的样式（并且样式随后重复）。

\n\n

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

\n\n

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

\n\n

到目前为止我尝试过使用 nth-child ，如下所示：

\n\n

\r\n

\r\n

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

\r\n

\r\n

\r\n

\n\n

它适用于前 5 个项目\xe2\x80\xa6，但是\xe2\x80\xa6\n我的问题是，它\xe2\x80\x99t 似乎完全作为循环工作\xe2\x80\xa6，我想它\xe2\x80\x99s 因为 2n 和 3n 有时会发生冲突（例如当你有 2*3 时）。我可以 \xe2\x80\x99t 对 nth-child 使用奇数和偶数，因为这个想法是让它仅在 5 个项目 \xe2\x80\xa6 之后循环

\n\n

有人对此有什么绝妙的想法吗？仅仅使用 CSS 就可以实现吗？

\n\n

谢谢！

\n

Answer 1

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

nth-child(an+b)

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

这是一个工作片段：

nth-child(an+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;}