前端的兄弟想必都接触过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;} | 被选中的元素(一般针对文字 |