UDN-企业互联网技术人气社区

板块导航

浏览  : 1176
回复  : 2

[CSS3] CSS3 :nth-child() 选择器

[复制链接]
王许柔的头像 楼主
发表于 2017-2-6 10:17:50 | 显示全部楼层 |阅读模式
  :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。

  n 可以是数字、关键词或公式。

  提示:请参阅 :nth-of-type() 选择器,该选择器选取父元素的第 N 个指定类型的子元素。

  实例 1

  Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词(第一个子元素的下标是 1)。

  在这里,我们为奇数和偶数 p 元素指定两种不同的背景色:
  1. <style type="text/css">
  2. p:nth-child(odd)
  3. {
  4. background:#ff0000;
  5. }
  6. p:nth-child(even)
  7. {
  8. background:#0000ff;
  9. }
  10. .col-3{background: #eee; color: #333; height: 100px; text-align: center; font-size: 18px; line-height: 100px;margin-bottom:10px;}
  11. .col-3:nth-child(3){background: #000;color: #fff;}
  12. </style>

  13. <p>第一个段落。</p>
  14. <p>第二个段落。</p>
  15. <p>第三个段落。</p>
  16. <p>第四个段落。</p>
  17. <p><b>注释:</b>Internet Explorer 不支持 :nth-child() 选择器。</p>

  18. <div class="col-3">1</div>
  19. <div class="col-3">2</div>
  20. <div class="col-3">3</div>
  21. <div class="col-3">4</div>
复制代码

  1. <style type="text/css">
  2. .col-3{background: #eee; color: #333; height: 100px; text-align: center; font-size: 18px; line-height: 100px;margin-bottom:10px;}
  3. .col-3:nth-child(3){background: #000;color: #fff;}
  4. </style>
  5. <div class="col-3">1</div>
  6. <div class="col-3">2</div>
  7. <div class="col-3">3</div>
  8. <div class="col-3">4</div>
复制代码


  实例 2

  使用公式 (an + b)。描述:表示周期的长度,n 是计数器(从 0 开始),b 是偏移值。

  在这里,我们指定了下标是 3 的倍数的所有 p 元素的背景色:
  1. <style>
  2. div:nth-child(3n+0)
  3. {
  4. background:#ff0000;
  5. }
  6. </style>

  7. <div>第一个段落。</div>
  8. <div>第二个段落。</div>
  9. <div>第三个段落。</div>
  10. <div>第四个段落。</div>
  11. <div>第五个段落。</div>
  12. <div>第六个段落。</div>
  13. <div>第七个段落。</div>
  14. <div>第八个段落。</div>
  15. <div>第九个段落。</div>
复制代码

相关帖子

发表于 2017-2-6 10:18:31 来自手机 | 显示全部楼层
OMG!介是啥东东
使用道具 举报

回复

发表于 2017-2-8 13:47:37 | 显示全部楼层
不错的帖子,支持下
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部