不定数量的子元素，五个一组循环不同的颜色，用css3 nth-child实现
注意：这其实是个数学题，我也是看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>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>
<p>第六个段落。</p>
<p>第七个段落。</p>
<p>第八个段落。</p>
<p>第九个段落。</p>
<p>第十个段落。</p>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>
<p>第六个段落。</p>
<p>第七个段落。</p>
<p>第八个段落。</p>
<p>第九个段落。</p>
<p>第十个段落。</p>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>
<p>第六个段落。</p>
<p>第七个段落。</p>
<p>第八个段落。</p>
<p>第九个段落。</p>
<p>第十个段落。</p>
</body>
</html> 相关推荐
lanzhusiyu 2020-07-18
momode 2020-09-11
覆雪蓝枫 2020-06-09
opspider 2020-06-02
沈宫新 2020-04-30
zengni 2020-04-07
somboy 2020-01-07
葉無聞 2019-12-30
JenniferMuMu 2018-04-20
realitycss 2018-04-13
srdwxA 2018-03-16
hfszy0 2018-03-06
LadyZhong 2019-07-01
沉着前进 2018-04-20