前端的兄弟想必都接触过CSS中一个神奇的玩意，不用添加class名可以轻松获取你想要的标签并给与修改添加样式，是不是很给力，它就是：nth-child 与 属性选择器

下面我将用几个典型的实例来给大家讲解:nth-child的实际用途：

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 表示是 2*0=0  2*1=2  2*2=4  2*3=6  2*4=8 2*5=10 这样子递增下去）
ul li:nth-child(3n+1)	选中为1 4 7 10这样顺序的下标li元素（n为自然数 初值为0 依次+1递增，3n+1 表示是 3*0+1=1  3*1+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的最后一个元素
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值的元素

属性选择器案例详解：

1.选中有name属性的元素

[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;}	被选中的元素(一般针对文字