nth-child选择器

选择器描述

ul li:first-child	选中ul父元素中的第一个li子元素
ul li:last-child	选中ul父元素中的最后一个子元素
ul li:nth-child(n)	选中ul父元素中的第n个子元素
ul li:nth-child(odd)	选中为奇数下标的li元素
ul li:nth-child(even)	选中为偶数下标的li元素
ul li:nth-child(2n)	选中为偶数下标的li元素（n为自然数 初值为0 依次+1递增，2n 表示是 20=0 21=2 22=4 23=6 24=8 25=10 这样子递增下去）
ul li:nth-child(3n+1)	选中为1 4 7 10这样顺序的下标li元素（n为自然数 初值为0 依次+1递增，3n+1 表示是 30+1=1 31+1=4 3*2+1=7 这样子递增下去）
ul li:nth-child(-n+5)	选中前五个li元素 （n为自然数 初值为0 依次-1递增，-n+5表示是 5+0=5 5+[-1]=4 5+[-2]=3 这样子递增下去）
ul li:nth-child(n+5)	选中第五个起的li元素 （n为自然数 初值为0 依次+1递增，n+5表示是 5+0=5 5+1=6 5+2=7 这样子递增下去）
ul li:nth-last-child(n)	选中ul父元素中的倒数第n个子元素
ul li:first-of-type	选中ul父元素中类型为li的的第一个元素
	ul li:last-of-type
ul li:nth-of-type(n)	选中ul父元素中类型为li的第n个元素
ul li:nth-last-of-type(n)	选中ul父元素中类型为li的倒数第n个元素

注：nth-child:是不筛选类型的，但是类型你得对得上选择器才生效

ul li:nth-child(1){background: #009A00;} /*下面有个span所以选到的第一个就是span，但是span和li对不上所以是不生效效果的*/ /*想用:nth-child选中里面的第一li得写成ul li:nth-child(2)*/<div id="box"><span></span><li></li><li></li><li></li><li></li></div>

注：nth-of-type(n):先筛选类型,再确定第几个元素

ul li:nth-of-type(1){background: #009A00;} /*过滤掉span后，获取到第一个li元素*/<div id="box"><span></span><li></li><li></li><li></li><li></li><li></li><li></li></div>

nth-child:结构伪类选择器详解：
1.选中ul父元素中的第一个li子元素
ul li:first-child{background: #009A00;}

2.选中ul父元素中的最后一个子元素
ul li:last-child{background: #009A00;}

3.选中ul父元素中的第5个子元素
ul li:nth-child(5){background: #009A00;}

4.选中为奇数下标的li元素
ul li:nth-child(odd){background: #009A00;}

5.选中为偶数下标的li元素
ul li:nth-child(even){background: #009A00;}

6.选中为奇数下标的li元素
ul li:nth-child(2n-1){background: #009A00;}

7.选中为偶数下标的li元素
ul li:nth-child(2n){background: #009A00;}

8.选中ul父元素中的倒数第2个子元素
ul li:nth-last-child(2){background: #009A00;}

9.选中ul父元素中类型为li的的第一个元素
ul li:first-of-type{background: #009A00;}

10.选中ul父元素中类型为li的第5个元素
ul li:nth-of-type(5){background: #009A00;}

CSS2属性选择器：

选择器例子描述

[attr]	[name]	选中有name属性的元素
[attr=val]	[name=box]	选中有name属性其值为box并且neme里面属性值只有box这一个的元素
[attr~=val]	[name~=box]	选中有name属性并其值是一个词列表,包含box值的元素

[name]{background: #009A00;} /* 将选中的元素背景设置为绿色 */ <div id="unp"><li class="ure"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li><li name="box"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li></div>

效果图:

2.选中有name属性其值为box并且neme里面属性值只有box这一个的元素

[name=box]{background: #009A00;} /* 将选中的元素背景设置为绿色 */ <div id="unp"><li class="ure"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li><li name="box"></li><li name="box erp"></li> /*这个name值有两个，这个便不会被选中*/<li class="ure"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li></div>

效果图：

3.选中有name属性并其值包含box值的元素

[name~=box]{background: #009A00;}<div id="unp"><li class="ure"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li><li name="box"></li><li name="box erp"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li></div>

效果图：

CSS3属性选择器：

选择器例子描述

[attr^=val]	[class^=box]	选中有class属性并且其值是以box开头的元素
[attr$=box]	[name$=box]	选中有class属性并且其值是以box结尾的元素
[attr*=box]	[name*=box]	选中有class属性并且其值里面有box的元素
CSS3属性选择器案例详解：
1.选中有class属性并且其值是以box开头的元素

[class^=box]{background: #009A00;} <div id="unp"><li class="box1"></li><li class="box2"></li><li class="box3"></li><li class="box4"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li></div>

效果图：

2.选中有class属性并且其值是以box结尾的元素

[class$=box]{background: #009A00;} <div id="unp"><li class="un-box"></li><li class="un-box"></li><li class="un-box"></li><li class="un-box"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li></div>

效果图：

3.选中有class属性并且其值中包含box的元素

[class*=box]{background: #009A00;} <div id="box"><li class="unboxp"></li><li class="unboxp"></li><li class="unboxp"></li><li class="unboxp"></li><li class="unboxp"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li></div>

效果图：
伪类属性选择器：

选择器例子描述

:disabled	input:disabled{ border: 2px solid red;}	选中禁用状态下的表单元素
:enabled	input:enabled{ border: 2px solid red;}	选中可用状态的表单元素
:checked	input:checked{width: 50px;height: 50px;}	选中被选中状态的单多选框
::selection	input::selection { color: red;}	被选中的元素(一般针对文字

总结

以上是生活随笔为你收集整理的nth-child选择器的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。