为每十个一组的元素循环不同的颜色，使用css3 nth-child实现

老金 2022.1.14 21:52 浏览(997) 评论 (0)

我也是參考了这篇文章的：https://www.ancii.com/al9mn4elb/

原文如下：

注意：这其实是个数学题，我也是看nth-child（an+b）表示以下标为a的n倍+b偏移量进行计算子元素
两种理解：
第一种：按照概念套思维：
五个一循环，那么1-5为5的第一个倍数，6-10是5的第二个倍数等等
a是5n是倍数b是偏移量
15*1-4
25*1-3
35*1-2
45*1-1
55*1
65*2-4
等等

第二种：数学思维：
如题：该题中需要五个一组循环那么假设现在有20个元素，则规律应该是有五组新组成的数据：arr1:[redarrbluearrpinkarryellowarrgreenarr]
0red:161116n
1blue:271217n
2pink:381318n
3yellow:491419n
4green:5101520n
按照nth-child的理解应该是先找到个a然后乘以n再加上b
我们分别对于每种颜色对应的arr数组进行nth-child计算,每个数字的下标都是n,a是5找寻规律式。
redarr:5(n-1)+15n-4
bluearr:5(n-1)+25n-3
pinkarr:5(n-1)+35n-2
yellowarr:5(n-1)+45n-1
greenarr:5(n-1)+55n
p元素对应自己的五组规律式，实现css背景色ok!
<!DOCTYPE html>
<html>
<head>
<style> 
p:nth-child(5n-4)
{
background:#ff0000;
}
p:nth-child(5n-3)
{
background:yellow;
}
p:nth-child(5n-2)
{
background:green;
}
p:nth-child(5n-1)
{
background:pink;
}

p:nth-child(5n)
{
background:blue;
}
</style>
</head>
<body>

第一个段落。
第二个段落。
第三个段落。
第四个段落。
第五个段落。
第六个段落。
第七个段落。
第八个段落。
第九个段落。
第十个段落。

第一个段落。
第二个段落。
第三个段落。
第四个段落。
第五个段落。
第六个段落。
第七个段落。
第八个段落。
第九个段落。
第十个段落。

第一个段落。
第二个段落。
第三个段落。
第四个段落。
第五个段落。
第六个段落。
第七个段落。
第八个段落。
第九个段落。
第十个段落。
</body>
</html>

他是五个一组，我的需求是十个一组，其实逻辑都是一样的

下面是我的CSS

.horizontal66-list > a.tagItem:nth-child(10n-9) {
	border-left-color: #ff968d;
}
.horizontal66-list > a.tagItem:nth-child(10n-8) {
	border-left-color: #ffa967;
}
.horizontal66-list > a.tagItem:nth-child(10n-7) {
	border-left-color: #ffc842;
}
.horizontal66-list > a.tagItem:nth-child(10n-6) {
	border-left-color: #ffed00;
}
.horizontal66-list > a.tagItem:nth-child(10n-5) {
	border-left-color: #c1ff6e;
}
.horizontal66-list > a.tagItem:nth-child(10n-4) {
	border-left-color: #64ec93;
}
.horizontal66-list > a.tagItem:nth-child(10n-2) {
	border-left-color: #36acff;
}
.horizontal66-list > a.tagItem:nth-child(10n-1) {
	border-left-color: #6a57ff;
}
.horizontal66-list > a.tagItem:nth-child(10n) {
	border-left-color: #9d56ff;
}

喜欢转发

加载评论中

热门文章