您当前的位置:主页 > 教程合集 > Html/css网站利发国际Html/css

CSS3中nth-child()选择器的用法

发布时间:2015-12-23编辑:余斗阅读:(0)字号:
    接触前端的人都应该碰到过标签“nth-child() ”,这是一个神器的标签,可以轻松的选取我们想要的标签并加样式。今天余斗就详细说说这个nth-child的用法: :nth-child(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素,其中n是一个简单的表达式,那么"n"取值是从“0”开始计算的,到什么时候结束我也不知道,如果你在实际应用中直接这样使用的话,将会选中所有子元素,比如说,在我们的demo中,你在li中使用":nth-child(n)",那么将选中所有的"li",如:

    .demo li:nth-child(n) {background: lime;}
     
    等于

    .demo li {background: lime;}
     
    CSS3中nth-child()选择器的用法 需要注意的是, 这里的“n”只能是"n",不能使用其他字母代替,不然会没有任何效果的。 例:

    .demo li:nth-child(3) {background: lime;}
     
    选择列表中的第三个li元素,规定背景样式。 CSS3中nth-child()选择器的用法 :nth-child(2n) 这中方式是前一种的变身,我们可以选择n的2倍数,实现选中奇数项,如:

    .demo li:nth-child(2n) {background: lime;}
     
    等于

    .demo li:nth-child(even) {background: lime;}
     
    CSS3中nth-child()选择器的用法 这里的 “:nth-child(2n)”就等于":nth-child(even)"效果。 :nth-child(2n-1) 这个选择器是在":nth-child(2n)"基础上演变过来的,上面说了是选择偶数,那么我们在他的基础上减去“1”就变成奇数选择,如:

    .demo li:nth-child(2n-1) {background: lime;}
     
    等于

    .demo li:nth-child(odd) {background: lime;}
     
    CSS3中nth-child()选择器的用法 实现这种奇数效果,我们还可以使用":nth-child(2n+1)"和":nth-child(odd)"。 :nth-child(n+5) 这个选择器是选择从第五个元素开始选择,这里的数字你可以自己定义,如:

    .demo li:nth-child(n+5) {background: lime;}
     
    CSS3中nth-child()选择器的用法 我们可以使用这种方法选择我们需要开始选择的元素位置,也就是说换了数字,起始位置就变了。 :nth-child(-n+5) 这种选择器刚好和上面的选择器相反,这个是选择第5个前面的,如:

    .demo li:nth-child(-n+5) {background: lime;}
     
    CSS3中nth-child()选择器的用法 :nth-child(4n+1) 这种方法是实现隔几选一的效果,比如我们这里是隔三选一,如果你把"4"换成别的数字那就是另外的一种隔法了,比如这个实例

    .demo li:nth-child(4n+1) {background: lime;}
     
    CSS3中nth-child()选择器的用法 了解了nth-child() 选择器的用法,我们可以扩展下使用nth-last-child() 选择器,主要用于匹配属于其元素的第 N 个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数,以上关于nth-child() 选择器的用法同样适用于nth-last-child() 而类似于nth-child()和nth-last-child(),我们同样使用nth-of-type()nth-last-of-type()来选择父元素下的第N个或倒数第N个元素,这里不多讲。 nth-child的这些用法在实际中很用得着,不用单独给需要选取的标签加上ID或Class,是不是很方便,另外,在用的时候,要注意的是,IE8 及更早的版本不支持此标签。
关键字词css3 nth-child
余斗余斗
  1. 转载请注明: CSS3中nth-child()选择器的用法_余斗余斗_利发国际
  2. 版权声明: 本站原创文章,由 发表在 Html/css 分类下,于2015-12-23最后更新
Css之Position的用法
利用Div+Css实现隐藏文字内容的几种方法
手机扫一扫 随身带着看

利发国际

百度360搜索搜狗搜索