咨询电话:
15628812133
06
2017/01

CSS3 :nth-child() 选择器如何使用

发布时间:2017-01-06 15:04:21
发布者:369563174
浏览量:
0

:nth-child属性是大家常用的css3属性,:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。n 可以是数字、关键词或公式。Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词所有主流浏览器均支持 :nth-child() 选择器,IE8及更早的版本是不支持的。

在进行选择时,我们会经常用到nth-child()属性,使用此属性,可以实现对一个或者多个的选择。

单个选择: 

应用场景:我们文汇软件官网的网站开发页面,去除第一个元素的左边距,那么CSS应该这样写 (对应元素):nth-child(1)

   .fw-u12 li:nth-child(1){margin-left:0px;}


那么只有第一个li的左边距为0,其余正常显示。

LK85B$LG%BQI91{W_@K$O)R.png

多个选择:

一般存在于多行排列中,比如我们做的嘉祥石雕项目,产品图片每一行的第三张需要清除右边距,那么括号里面的为公式为:(3n+3)。

    .gc_left_pro li:nth-child(3n+3){margin-right:0;}


那么只要的3的倍数+3,li右边距都为零,其余右边距正常显示。

2OGT}`O2HQO$Y6{SP3UOB0W.png

关于nth-child具体怎么使用,小编在这里只举了两个例子,还有更多的用法等大家去实践。也欢迎您和我们一同分享。

关键词:
返回列表