不定数量的子元素，五个一组循环不同的颜色，用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>
Phoebe的学习天地

Phoebe的学习天地

相关推荐

jQuery实现日历效果

jquery是用的是2.0版本。--基于W3C标准 不用做任何修改-->. --设置初始化文档信息和文档管理标注-->. --整个页面编码 utf-8 国际编码 通用性最强，GBK/gb2312 中文-->. .signincalenda

momode / 0评论 2020-09-11

分享一个纯CSS写的钟表式计时器

width: 400px;height: 400px;border-radius: 50%;border: 3px solid black;margin: 200px auto;position: relative;width: 3px;height: 4

lanzhusiyu / 0评论 2020-07-18

css定位：p:nth-child(n)

定位p标签下的第一个元素，下标从1开始。

zengni / 0评论 2020-06-14

css: 伪类和伪元素选择器

在页面中，有时候同一个元素在不同动作下有不同的样式。这几种情况下这个链接的标签并没有变化，有变化的只是它的状态，这时候就可以里用伪类来实现这个需求。在浏览器中，伪类的出现是为了向某些选择器添加特殊的效果或限制。伪类是在正常的选择器后面加上伪类名称，中间用冒

覆雪蓝枫 / 0评论 2020-06-09

20 个 CSS高级样式技巧汇总

使用技巧会让人变的越来越懒，没错，我就是想让你变懒。下面是我收集的CSS高级技巧，希望你懒出境界。这段代码会让你的彩色照片显示为黑白照片，是不是很酷？然后再除去最后一个元素……可以直接使用 :not() 伪类来应用元素：。这样代码就干净，易读，易于理解了。

opspider / 0评论 2020-06-02

CSS3 nth-child()选择前几个元素

一、两者结合使用，可以限制选择某一个范围，选择第6个到第9个 :nth-child(n+6):nth-child

coulder / 0评论 2020-06-02

02 css3

E[att^="val"]匹配具有att属性、且值以val开头的E元素。类选择器、属性选择器、伪类选择器权重为10. ## 1.2 css3结构伪类选择器 ##. /* 只选择第一个子标签元素 */. /* n可以是关键词 even是

沈宫新 / 0评论 2020-04-30

CSS躬行记（2）——伪类和伪元素

　　伪选择器弥补了常规选择器的不足，能够实现一些特殊情况下的样式，例如在鼠标悬停时或只给字符串中的第一个字符指定样式。与类选择器类似，可以从HTML元素的class属性中查看到，但伪选择器不会出现在HTML文档中。并且它的关键字大小写不敏感，也就是说emp

zengni / 0评论 2020-04-07

CSS伪类选择器 奇偶匹配nth-child(even)

简单的归纳下nth-child()的几种用法。直接匹配第number个元素。参数number必须为大于0的整数。其中参数an中的字母n不可缺省，它是倍数写法的标志，如3n、5n。此处一负一正，均不可缺省，否则无意义。.table > tr:nth-c

somboy / 0评论 2020-01-07

CSS3 :nth-child(N)的用法

DOCTYPE html><html><head><style>p:nth-child{background:#ff0000;}</style></head><body><

葉無聞 / 0评论 2019-12-30

selenium获取微博用户粉丝数

获取微博用户粉丝数。# 选中搜索框，输入检索内容，点击搜搜。# 进入新页面,设置新句柄

letheashura / 0评论 2019-11-12

CSS选取第几个标签元素：nth-child、first-child、last-child

但是，如果是静态代码，php就无法用了。这时，我们还可以通过CSS来实现，CSS给我们提供了几个非常有用的样式参数：first-child、last-child、nth-child。下面，详细看一下它们的使用。first-child表示选择列表中的第一个标

JenniferMuMu / 0评论 2018-04-20

css奇偶后代选择器

遇到分类栏左右两侧不同样式需求，之前用的php判断。现在介绍个更为简单的方法，css后代选择器，除此外还可以通过jquery添加类名来实现

realitycss / 0评论 2018-04-13

解决nth-child（n）属性在IE8浏览器中兼容性问题

学生提问：nth-child属性在IE8浏览器失效方案？这里我首先想到的一个简单的解决方案为CSS兄弟选择器，因为IE支持first-child与last-child，所以我可用兄弟选择器去解决。:nth-child用于匹配倍数为a的元素，如3n、5n…可

srdwxA / 0评论 2018-03-16

CSS后代选择器

但是，如果是静态代码，php就无法用了。这时，我们还可以通过CSS来实现，CSS给我们提供了几个非常有用的样式参数：first-child、last-child、nth-child。下面，详细看一下它们的使用。first-child表示选择列表中的第一个标

hfszy0 / 0评论 2018-03-06

CSS文字交错滑动效果-001

第一步：通过CSS3 的transform属性移动文字，样式如下.box span:nth-child {

dazhifu / 0评论 2019-07-01

CSS实用技巧干货

}当然，你也可以使用 .nav li + li 或者 .nav li:first-child ~ li ，但是 :not() 更加清晰，具有可读性。:nth-child表示列表中的偶数标签，即选择第2、第4、第6……

LadyZhong / 0评论 2019-07-01

CSS3 实现根据ul中li的个数设置li的宽度

这个表示选择列表中的奇数标签，即选择 第1、第3、第5、第7……

NARUTOLUOLUO / 0评论 2018-09-27

CSS选取第几个标签元素：nth-child、first-child、last-child

但是，如果是静态代码，php就无法用了。这时，我们还可以通过CSS来实现，CSS给我们提供了几个非常有用的样式参数：first-child、last-child、nth-child。下面，详细看一下它们的使用。first-child表示选择列表中的第一个标

沉着前进 / 0评论 2018-04-20

css奇偶后代选择器

遇到分类栏左右两侧不同样式需求，之前用的php判断。现在介绍个更为简单的方法，css后代选择器，除此外还可以通过jquery添加类名来实现

dazhifu / 0评论 2018-04-13

解决nth-child（n）属性在IE8浏览器中兼容性问题

学生提问：nth-child属性在IE8浏览器失效方案？这里我首先想到的一个简单的解决方案为CSS兄弟选择器，因为IE支持first-child与last-child，所以我可用兄弟选择器去解决。:nth-child用于匹配倍数为a的元素，如3n、5n…可

pengornis / 0评论 2018-03-16

前端每日实战：150# 视频演示如何用 CSS 和 D3 创作一个集体舞动画

效果预览按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。可交互视频此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用 chrome, safari, edge 打开观看。代码解读定义 dom，容器中包含 1 个 .squar

lyelyelye / 0评论 2019-06-28

前端每日实战：111# 视频演示如何用纯 CSS 创作一只艺术的鸭子

效果预览按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。可交互视频此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用 chrome, safari, edge 打开观看。

k韶华 / 0评论 2019-06-28

前端每日实战：103# 视频演示如何用纯 CSS 创作一只监视眼

效果预览按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。可交互视频此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用 chrome, safari, edge 打开观看。

liboqiao / 0评论 2019-06-28

CSS transform-origin的理解

前言最近做的一个烟花动画，就是烟花散开的动画，在动画的实现过程中，主要在烟花旋转过程中卡住了，后来发现主要对transform-origin属性理解不深，特地找了个例子来练习，加深了对属性的理解。transform-origin作用这个属性是用来改变元素变

liboqiao / 0评论 2019-06-28

前端每日实战：86# 视频演示如何用纯 CSS 创作一个方块旋转动画

效果预览按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。可交互视频此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用 chrome, safari, edge 打开观看。

xiaohuli / 0评论 2019-06-28

前端每日实战：84# 视频演示如何用纯 CSS 创作一个极品飞车 loader

效果预览按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。可交互视频此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用 chrome, safari, edge 打开观看。

AnyBisks / 0评论 2019-06-28

前端每日实战：83# 视频演示如何用纯 CSS 创作一个小球上台阶的动画

效果预览按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。可交互视频此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用 chrome, safari, edge 打开观看。}下面做小球的动画，用了障眼法，使 2 个同色小球的交

切慕溪水 / 0评论 2019-06-28

前端每日实战：81# 视频演示如何用纯 CSS 创作一个变色旋转动画

效果预览按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。可交互视频此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用 chrome, safari, edge 打开观看。}定义改变颜色的动画效果，以色相环一周 360 度为

yibawuqing / 0评论 2019-06-28

前端每日实战：80# 视频演示如何用纯 CSS 创作一个自行车车轮

效果预览按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。可交互视频此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用 chrome, safari, edge 打开观看。

葉無聞 / 0评论 2019-06-27

前端每日实战：71# 视频演示如何用纯 CSS 创作一个跳 8 字型舞的 loader

效果预览按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。可交互视频此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用 chrome, safari, edge 打开观看。

LadyZhong / 0评论 2019-06-27

前端每日实战：53# 视频演示如何用纯 CSS 创作一个文本淡入淡出的 loader 动画

效果预览按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。可交互视频此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用 chrome, safari, edge 打开观看。

nicepainkiller / 0评论 2019-06-27

前端每日实战：48# 视频演示如何用纯 CSS 创作一盘传统蚊香

效果预览按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。可交互视频教程此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用 chrome, safari, edge 打开观看。border-radius: 50% 50% 0

afeichuanqi / 0评论 2019-06-27

前端每日实战：45# 视频演示如何用纯 CSS 创作一个菱形 loader 动画

效果预览按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。可交互视频教程此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用 chrome, safari, edge 打开观看。

libowen0 / 0评论 2019-06-27

前端每日实战：39# 视频演示如何用纯 CSS 创作一个表达怀念童年心情的条纹彩虹心特效

效果预览按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。可交互视频教程此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用 chrome, safari, edge 打开观看。

nicepainkiller / 0评论 2019-06-27

用状态机写轮播

刚刚的轮播用具体思维做，因为不知道它有哪几种状态，就一步步来做，等效果做出来后，哪几种状态，一目了然。下面就用抽象思维做一遍.图片出现在视窗状态，我用 current 表示图片离开视窗状态，我用 leave 表示图片准备进入视窗状态，我用 enter 表示

benjonc / 0评论 2019-06-27

前端每日实战：28# 视频演示如何用纯 CSS 绘制一个世界上不存在的彭罗斯三角形

效果预览按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。可交互视频教程此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用 chrome, safari, edge 打开观看。

yaodilu / 0评论 2019-06-27

前端每日实战：27# 视频演示如何用纯 CSS 创作一个精彩的彩虹 loading 特效

效果预览按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。可交互视频教程此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用 chrome, safari, edge 打开观看。

libowen0 / 0评论 2019-06-27

前端每日实战：22# 视频演示如何用纯 CSS 创作出美丽的彩虹条纹文字

效果预览按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。可交互视频教程此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用 chrome, safari, edge 打开观看。代码解读定义 dom，容器中包含文本，并且包含4个

王为仁 / 0评论 2019-06-27

jQuery学习笔记

jQuery学习笔记jQuery大部分功能需要根据文档的DOM模型来工作，首先需要正确地解析到整个文档的DOM模型结构。使用jQuery需要在整个文档被浏览器完全加载后才开始进行。});$是在jQuery中使用的变量名，可以使用jQuery.noConfl

Gcalolin / 0评论 2019-06-27

前端每日实战：17# 视频演示如何用纯 CSS 创作炫酷的同心矩形旋转动画

效果预览按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。可交互视频教程此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用 chrome, safari, edge 打开观看。源代码下载请从 github 下载。

lanzhusiyu / 0评论 2019-06-27

前端每日实战：1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效

效果预览按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。可交互视频教程此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用 chrome, safari, edge 打开观看。源代码下载请从 github 下载。代码解读定义

jianqi / 0评论 2019-06-27

CSS3 :nth-child()伪类选择器

CSS3的强大，让人惊叹，人们在惊喜之余，又不得不为其艰难的道路感到可惜：好的标准只有得到行业浏览器的良好支持才算得上“标准”。CSS3标 准已提出数年，但是目前能实现她的浏览器并不多，虽然部分浏览器能实现部分规范，但这又有什么用呢？面对更多的兼容性问题，

wolaizheli / 0评论 2014-10-09

css伪类和伪元素的学习

css引入伪类和伪元素概念是为了格式化文档树以外的信息，也就是说。伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者列表中的第一个元素。虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能

陈浩 / 0评论 2019-06-27

CSS3伪类选择器

第一种是我们在链接中常看到的锚点伪类，如":link",":visited";另外一种被称作用户行为伪类，如“:hover”,":active"和":focus"。

Alisa0 / 0评论 2014-04-18

CSS3实现一个旋转的花朵

实现原理：其实很简单，就是中间的圆圈定位在中间，其他的6个圆圈，进行不同的绝对定位，然后进行旋转！

Alisa0 / 0评论 2019-06-26

【CSS】nth-child 与 nth-of-type辨析

nth-child 和 nth-of-type是CSS的两个伪选择器。要对相同位置或相似做操作的时候非常有用。前者的字面意思是选择第几个子元素，后者的字面意思是选择某类型的第几个元素。首先来看他们的完整格式。selector:nth-of-type /

gigipop / 0评论 2019-06-26

CSS练习实现多种loading

width: 70px;height: 200px;margin: auto;display: flex;display: inline-block;width: 8px;height: 40px;border-radius: 4px;background

李小丰天天向上 / 0评论 2019-06-26

网格grid的分享和总结（参考web前端微信公众号内容）

/* width: 100%;(容器的宽度可以规定也可以不固定，其中若不规定宽度则追溯到父集的宽度直至body ,高也一样*/. </html>第一张代码生成的页面图，第二张是个人对grid-column-start中的column的备注，其中

jieq / 0评论 2019-06-26