CSS3 nth-child 伪类的用法

CSS3提供了强盛的伪类（pseudo-class）选择器，使开拓者能选择某一工具中切合特定前提的元素举办渲染。这些伪类在刚打仗的时辰各人会认为很是紊乱，但当把握了往后能大大进步你的代码服从，而且节减代码量。本日先要说的是nth-child伪类。

nth-child伪类的界说

nth-child伪类在W3C里界说是选择选择父元素里的第n个子元素，可以行使an+b的情势选择子元素，举例用法如下：

智慧的看官或许已经知道nth-child伪类可以用来干什么了。

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

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

起首确定列表的HTML布局，我行使了做简朴的ul > li布局，代码如下

列表的布局确定后，我们要做的是使ul里的七个li项按照单双项的法则举办隔行变色的处理赏罚。因此我们用nth-child(2n+1)可能nth-child(2n)举办选择都可以。我的CSS代码如下：

在这里我选择了对列表的单数项举办非凡渲染，下面是我做出来的结果，各人也可以看这个DEMO。

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/

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!