注意：这其实是个数学题，我也是看nth-child（an+b） 表示以下标为a的n倍+b偏移量进行计算子元素
两种理解：
第一种：按照概念套思维：
五个一循环，那么1-5为5的第一个倍数，6-10是5的第二个倍数 等等
a是5 n是倍数 b是偏移量
1 5*1-4
2 5*1-3
3 5*1-2
4 5*1-1
5 5*1
6 5*2-4
等等
第二种：数学思维：
如题： 该题中需要五个一组循环 那么假设现在有20个元素，则规律应该是有五组新组成的数据：arr1:[redarr bluearr pinkarr yellowarr greenarr]
0 red: 1 6 11 16 n
1 blue: 2 7 12 17 n
2 pink: 3 8 13 18 n
3 yellow:4 9 14 19 n
4 green: 5 10 15 20 n
按照nth-child的理解应该是先找到个a 然后乘以n 再加上b
我们分别对于每种颜色对应的arr数组进行nth-child 计算,每个数字的下标都是n,a是5 找寻规律式。
redarr : 5(n-1)+1 5n-4
bluearr: 5(n-1)+2 5n-3
pinkarr: 5(n-1)+3 5n-2
yellowarr: 5(n-1)+4 5n-1
greenarr: 5(n-1)+5 5n
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>
分享到：
相关推荐
先看一个简单的实例，首先是HTML部分： 我是第1个p标签 我是第2个p标签</p> <!-- 希望这个变红 --> 然后两个选择器相对应的CSS代码如下： ...对于:nth-child选择器，在简单白话文中，意味着选择一个元素：
今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”。 语法： :nth-child(an+b) 为什么选择她，因为我认为，这个选择器是最多学问的一个了。很可惜，据我所测，目前能较好地支持她的只有Opera9+和Safari...
CSS-nth-child选择器是CSS中的一种强大的伪类选择器，用于选取具有特定索引位置的子元素。这个选择器允许开发者基于元素在父元素中的相对位置来应用样式，而不仅仅依赖于元素的类型或类名。这在创建动态布局、响应式...
今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”。 语法： :nth-child(an+b) 为什么选择她，因为我认为，这个选择器是最多学问的一个了。很可惜，据我所测，目前能较好地支持她的只有Opera9+和...
在标题和描述中提到的代码示例中，开发者尝试使用`nth-child()`选择器为`<ul>`列表中的第一和第三个`<li>`元素设置不同的背景颜色。在IE9及以上版本，这个代码可以正常工作，但在IE8中，背景颜色无法显示。 为了...
场景一：在一组拥有不同标签类型的兄弟元素中，如果我们想要选择第二个元素，并且这个元素必须是标签，那么我们可以使用p:nth-child(2)。但如果我们想要选择第二个标签元素，无论它在兄弟元素中的位置如何，那么应...
在CSS（层叠样式表）中，`:nth-child(n)`是一个强大的选择器，它允许我们精确地选择和操作页面上的特定子元素。这个选择器基于元素在父元素中的相对位置来匹配元素，而不是基于它们的名称、类或者ID。这意味着无论...
在css3中有两个新的选择器可以选择父元素下对应的子元素，一个是:nth-child 另一个是:nth-of-type。 但是它们到底有什么区别呢？下面这篇文章主要就给介绍了CSS3中nth-child与nth-of-type的区别,需要的朋友可以参考...
CSS中的`:nth-child()`和`:nth-of-type()`是两种选择器，它们在选取HTML元素时有不同的侧重和行为。本文将详细解析这两个选择器的工作原理及其差异。 `:nth-child()`选择器用于选取父元素中具有特定索引位置的子...
在CSS3中，`:nth-child()`允许我们选择特定顺序的子元素，而不仅仅是第一个、最后一个或者偶数和奇数。 `:nth-child()`的语法结构是`:nth-child(an+b)`，这里的`an+b`参数定义了选择器的模式。`n`是一个变量，代表...
对此，我把CSS3标准中nth-child()用法大致介绍下： CSS3伪类选择器：nth-child() 简单的归纳下nth-child()的几种用法。 第一：nth-child(number) 直接匹配第number个元素。参数number必须为大于0的整数。(EG) li:nth...
:eq(index)选择器只匹配一个元素，而:nth-child选择器将为每一个父元素匹配子元素。 :nth-child从1开始的，而:eq()是从0开始。 语法结构: 代码如下:$(“:nth-child”) 此选择器一般也要和其他选择器配合使用，比如...