不定数量的子元素,五个一组循环不同的颜色,用css3 nth-child实现

Phoebe的学习天地 2018-07-25

注意:这其实是个数学题,我也是看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>

相关推荐