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

详解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,是不是很拉轰!

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

评论 42

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

    Thanks for the help!

    Naoma24小时前回复
  2. #32

    Couldn’t be written any better. Reading this post reminds me of my old room mate! He always kept talking about this. I will forward this article to him. Pretty sure he will have a good read. Thanks for sharing!

  3. #31

    I think one of your adverts triggered my internet browser to resize, you might want to put that on your blacklist.

  4. #30

    Thanks for taking this opportunity to discuss this, I feel fervently about this and I like learning about this subject.

  5. #29

    Thank you for the good writeup. It in fact was a amusement account it. Look advanced to far added agreeable from you! However, how could we communicate?

  6. #28

    I really glad to find this web site on bing, just what I was searching for : D too saved to fav.

    Nonton Anime2周前 (05-11)回复
  7. #27

    If only my personal content articles appeared as if this particular! That is a enhance, btw?-I ‘m new to blog posting and reading numerous blog posts is helping me out with my very own. Any kind of info you could throw my method to assistance is very appreciated. Just good information on this particular post!

    cat2周前 (05-09)回复
  8. #26

    Aw, this was an incredibly nice post. Finding the time and actual effort to create a superb article… but what can I say… I procrastinate a whole lot and don’t seem to get nearly anything done.

    DMC52个月前 (03-31)回复
  9. #25

    Naturally I like your web-site, but you have to take a look at the spelling on quite a few of your posts. A number of them are rife with spelling issues and I find it very bothersome to tell you. On the other hand I’ll surely come back again!

    my singing monsters2个月前 (03-28)回复
  10. #24

    i joined so many seo forum on the internet and they are really quite helpful and i have learned a lot`

    Paola Arabajian2个月前 (03-11)回复
  11. #23

    kan riben pian 辣女啵 wwwlanvbocom

    112年前 (2017-07-11)回复
  12. #22

    演示地址都一样啊。

    JV5年前 (2014-10-28)回复
  13. #21

    确实很拉轰

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

      浩子5年前 (2014-05-27)回复
  14. #20

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

    toyean6年前 (2013-04-10)回复
  15. #19

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

    明明小7年前 (2012-08-27)回复
  16. #18

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

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

    专业,这就是!!

    Cober8年前 (2011-06-28)回复
  18. #16

    这个属性非常有意思哈!

    liveme8年前 (2011-06-24)回复
  19. #15

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

    UJOHN8年前 (2011-06-24)回复
  20. #14

    😛 赞一个!

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

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

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

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

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

    很方便,很好用啊! 😛

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

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

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

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

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

        浩子8年前 (2011-07-05)回复
  25. #9

    这个不错

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

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

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

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

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

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

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

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

      流年8年前 (2011-12-27)回复
  29. #5

    IE7 8都颓啊..

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

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

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

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

    格桑8年前 (2011-06-17)回复
  31. #3

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

    筱筱8年前 (2011-06-17)回复
  32. #2

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

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

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

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

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

立即前往