设为首页 - 加入收藏 福建站长网 (http://www.52fujian.com)- 国内知名站长资讯网站,提供最新最全的站长资讯,创业经验,网站建设等!
热搜: 2018 系统 数据 为什么
当前位置: 首页 > 创业 > 经验 > 正文

CSS3 nth-child 伪类的用法

发布时间:2018-09-07 07:07 所属栏目:[经验] 来源:站长网
导读:CSS3提供了强大的伪类(pseudo-class)选择器,使开发者能选择某一对象中符合特定条件的元素进行渲染。这些伪类在刚接触的时候大家会觉得非常混乱,但当掌握了以后能大大提高你的代码效率,并且节省代码量。今天先要说的是nth-child伪类。 nth-child伪类的

CSS3提供了强大的伪类(pseudo-class)选择器,使开发者能选择某一对象中符合特定条件的元素进行渲染。这些伪类在刚接触的时候大家会觉得非常混乱,但当掌握了以后能大大提高你的代码效率,并且节省代码量。今天先要说的是nth-child伪类。

nth-child伪类的定义

nth-child伪类在W3C里定义是选择选择父元素里的第n个子元素,可以使用an+b的形式选择子元素,举例用法如下:

tr:nth-child(2n+1) /* 选择表格里的单数行 */
tr:nth-child(odd) /* 同上 */
tr:nth-child(2n) /* 选择表格里的双数行 */
tr:nth-child(even) /* 同上 */

聪明的看官大概已经知道nth-child伪类可以用来干什么了。

CSS3 nth-child 伪类应用实例 — 隔行变色列表

既然nth-child伪类能让我们轻松第选择容器里的某一个子元素,我们是不是可以用它来干点什么呢?需求最大的当然是隔行变色的表格或者列表。我们这就去做一个隔行变色的列表看看。

首先确定列表的HTML结构,我使用了做简单的ul > li结构,代码如下


  • 项目一

  • 项目二

  • 项目三

  • 项目四

  • 项目五

  • 项目六

  • 项目七

列表的结构确定后,我们要做的是使ul里的七个li项根据单双项的规则进行隔行变色的处理。因此我们用nth-child(2n+1)或者nth-child(2n)进行选择都可以。我的CSS代码如下:

ul li {
background: #9FF none repeat scroll 0 0;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
padding: 10px;
color: #000;
}
ul li:nth-child(2n+1) {
background: #6F9 none repeat scroll 0 0;
}

在这里我选择了对列表的单数项进行特殊渲染,下面是我做出来的效果,大家也可以看这个DEMO
CSS3 nth-child 伪类效果

nth-child伪类的衍生

除了nth-child以外,W3C还为我们提供了几个基于nth-child定义的衍生伪类,这里简单地说说他们的用途。

  • E:nth-last-child(n): 选择某个子元素,从最后一个数起
  • E:nth-of-type(n): 选择某个某种类型的子元素
  • E:nth-last-of-type(n): 选择某个某种类型的子元素,从最后一个符合条件的元素数起
  • E:first-child: 选择第一个子元素(这个伪类在CSS2里就有)
  • E:last-child: 选择最后一个子元素

nth-child伪类的家族里,除了E:first-child外,其他的伪类都只能在支持CSS3的浏览器里起作用,也就是说在目前的IE里是看不到效果的。

出处:http://blog.imbolo.com/css3-nth-child-pseudo-class/

【免责声明】本站内容转载自互联网,其相关言论仅代表作者个人观点绝非权威,不代表本站立场。如您发现内容存在版权问题,请提交相关链接至邮箱:bqsm@foxmail.com,我们将及时予以处理。

网友评论
推荐文章