gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 14:51:43 25 4
gpt4 key购买 nike

<分区>

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

谢谢!

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com