关注前端开发
关注用户体验

详解CSS中:nth-child的用法

前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”。

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

Tips:还用低版本的IE浏览器的哥们请绕过!

:nth-child(2)选取第几个标签,“2可以是你想要的数字”

.demo01 li:nth-child(2){background:#090}

:nth-child(n+4)选取大于等于4标签,“n”表示从整数,下同

点此查看实例展示

.demo01 li:nth-child(n+4){background:#090}

:nth-child(-n+4)选取小于等于4标签

点此查看实例展示

.demo01 li:nth-child(-n+4){background:#090}

:nth-child(2n)选取偶数标签,2n也可以是even

点此查看实例展示

.demo01 li:nth-child(2n){background:#090}

:nth-child(2n-1)选取奇数标签,2n-1可以是odd

点此查看实例展示

.demo01 li:nth-child(2n-1){background:#090}

:nth-child(3n+1)自定义选取标签,3n+1表示“隔二取一”

点此查看实例展示

.demo01 li:nth-child(3n+1){background:#090}

:last-child选取最后一个标签

点此查看实例展示

.demo01 li:last-child{background:#090}

:nth-last-child(3)选取倒数第几个标签,3表示选取第3个

点此查看实例展示

.demo01 li:nth-last-child(3){background:#090}

ok,:nth-child的这些用法在实际中很用得着,不用单独给需要选取的标签加上ID或Class,是不是很拉轰!

未经允许不得转载:大前端 » 详解CSS中:nth-child的用法
分享到:更多 ()

评论 32

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #23

    kan riben pian 辣女啵 wwwlanvbocom

    112周前 (07-11)回复
  2. #22

    演示地址都一样啊。

    JV3年前 (2014-10-28)回复
  3. #21

    确实很拉轰

    haha3年前 (2014-05-21)回复
    • 你的邮件是随便写的,不过我还是回复了你

      浩子3年前 (2014-05-27)回复
  4. #20

    对于IE的兼容来说,果断还是jquery比较靠谱 :mrgreen:

    toyean4年前 (2013-04-10)回复
  5. #19

    诶呀,IE烦死了,每次都是在它身上浪费大量时间,,

    明明小5年前 (2012-08-27)回复
  6. #18

    下午看到了CSS3里头追加的:nth-of-type() 然后对比了下, 发现似乎还是:nth-of-type()更灵活, 更符合惯有的思路.

    ADD~``6年前 (2011-07-12)回复
  7. #17

    专业,这就是!!

    Cober6年前 (2011-06-28)回复
  8. #16

    这个属性非常有意思哈!

    liveme6年前 (2011-06-24)回复
  9. #15

    还有:first-child选取第一个标签

    UJOHN6年前 (2011-06-24)回复
  10. #14

    😛 赞一个!

    那些事儿6年前 (2011-06-22)回复
  11. #13

    博文还是一样的好,谢谢你的分享,以后我会常来的。

    宁波废铝回收6年前 (2011-06-21)回复
  12. #12

    博文还是一样的好,谢谢你的分享,以后我会常来的。

    抛丸机除尘设备6年前 (2011-06-20)回复
  13. #11

    很方便,很好用啊! 😛

    我行我骕6年前 (2011-06-20)回复
  14. #10

    很好用 但是IE全家不能用 有没有解决的办法啊

    qnlz6年前 (2011-06-20)回复
    • 这个没有

      浩子6年前 (2011-06-20)回复
    • 用jquery可以解决,jquery的选择器。

      Jayuh6年前 (2011-07-05)回复
      • 是的,jQuery可以,但是有这么简单吗,一句搞定,jQuery需要加载几十KB的库

        浩子6年前 (2011-07-05)回复
  15. #9

    这个不错

    吴凯6年前 (2011-06-18)回复
  16. #8

    那个颓啊….现在web程序前端是大头啊….

    那年夏天6年前 (2011-06-18)回复
  17. #7

    还有,哪位前大解释一下,li:nth-child(3n-1),这个有些怪胎..

    认真6年前 (2011-06-18)回复
    • :nth-child(value)value取值是从1开始,当小于0时可能忽略吧。3n-1当n=0时value=-1忽略,当n=1时正好是第二个

      火柴6年前 (2011-06-20)回复
  18. #6

    “:nth-child(n+4)选取大于等于4标签” 为什么不是”:nth-child(n>=4)” 这样不是更好理解么?同理”:nth-child(-n+4)选取小于等于4标签”为什么不是”:nth-child(n<=4)" 都不知w3c怎么想出来的…

    认真6年前 (2011-06-18)回复
    • 因为并不是简单的为了这个大于等于的,而是一系列的,比如 2n+4 等;
      只是 1n + 4 时表现为大于等于4的而已

      流年6年前 (2011-12-27)回复
  19. #5

    IE7 8都颓啊..

    ADD~``6年前 (2011-06-17)回复
    • 哈哈,就是要颓它们

      浩子6年前 (2011-06-17)回复
      • 下午尝试用HTML5的标签来写页面. 不想用js协助IE支持他们. 就随便整了两句话. 鄙视了下IE全家.. :mrgreen:

        ADD~``6年前 (2011-06-17)回复
  20. #4

    今天做小东西有个地儿想用到这些个选择器来着,这些个选择器挺好使得,就是部分浏览器不兼容啊。。。
    附上一个转载的css3+伪类的小例子。。。。http://aiyouu.net/css3-rainbow-list/

    格桑6年前 (2011-06-17)回复
  21. #3

    :mrgreen: 拉轰拉轰,但是要摒弃低版本的ie。。。

    筱筱6年前 (2011-06-17)回复
  22. #2

    IE6不支持有个蛋用.蛋疼.

    草地上6年前 (2011-06-17)回复
  23. #1

    的确很拉轰,呵呵,好玩。

    通信民工6年前 (2011-06-17)回复

themebetter 国内更好的WordPress主题服务商

立即前往