CSS3 :nth-child() 选择器 对相同元素进行不同操作的方法

定义和用法
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。
n 可以是数字、关键词或公式。
注:这儿的意思是指如果一个父元素里面含有相同的几个元素,那么可以用nth-child来对相同的元素进行样式控制。

例:

.online li:nth-child(1) { background:url(on_bg1.png) left no-repeat;}
.online li:nth-child(2) { background:url(on_bg2.png) left no-repeat;}
.online li:nth-child(3) { background:url(on_bg3.png) left no-repeat;}

这个例子中,在类online中有三个li元素,我们想对每个li元素使用不同的背景,普通的方法是在每个li元素里面定义一个class,但如果我们使用nth-child,则直接用li:nth-child(1),li:nth-child(2),li:nth-child(3)这种方式就可以了。

nth-child适用于从多元素类型,如果上面的li变成了p,那么我们只需要将li:nth-child(1)换成p:nth-child(1)来使用即可。

评论

大侠名号:   验证码: 点击我更换图片  

修远兮

在这里记录每一点自己需要的知识

添加创始人微信,一起交流心得

推荐文章RECOMMEND