有你在真好 的个人博客
CSS3 中的 -nth-child() 选择器
阅读:2033 添加日期:3/30/2021 5:40:53 PM

今天说一个在css3中不常用的到的选择器属性 :nth-child(),它可以方便的对某个HTML元素下的任何子元素进行操作,而要操作的HTML元素不论任何类型。

CSS3 中的 :nth-child() 选择器

CSS3 :nth-child() 属性定义

:nth-child(n):选择器匹配属于其父元素的第 N 个子元素,任何类型的元素都可以。

语法:

参数:

n:可以为数字,公式或关键词

CSS3 :nth-child() 属性使用方法

HTML代码




 

 Document

 





 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

以下所有的示例,都以上面的 html 代码为标准,只修改其CSS属性

示例1:

改成第二个 li 标签字体的颜色为蓝色

CSS代码:

li:nth-child(2){
 background-color:blue;
}

运行结果:

CSS3 中的 :nth-child() 选择器

注意:如果 li:nth-child() 中的参数为单个的数字,则表示第 n 个元素开始。

下面的示例中,使用了(an+b) 公式,a代表一个循环的大小,n是一个计数器(从0开始),b为偏移量。

示例2:

使前三个 li 标签的颜色为绿色

CSS代码:

li:nth-child(-n+3){
 background-color:green;
}

运行结果:

CSS3 中的 :nth-child() 选择器

注:-n+3 表示小于以及等于 3的标签

示例3:

前二个 li 标签除外,改变其余的所有标签

CSS代码:

li:nth-child(n+3){
 background-color:green;
}

运行结果:

CSS3 中的 :nth-child() 选择器

示例4:

改变偶数 li 标签的颜色

CSS代码1:

li:nth-child(2n){
 background-color:green;
}

CSS代码2:

li:nth-child(even){
 background-color:green;
}

运行结果:

CSS3 中的 :nth-child() 选择器

说明:

1、代码1 与 代码2 是等价的

2、even 是用来表示偶数的关键词语

示例5:

改变奇数 li 标签的颜色

代码1:

li:nth-child(2n-1){
 background-color:green;
}

代码2:

li:nth-child(odd){
 background-color:green;
}

运行结果:

CSS3 中的 :nth-child() 选择器

说明:

1、代码1 与 代码2 为等价的

2、odd 是用来表示 奇数 的关键词