css3伪类选择器:nth-child() 和 :nth-of-type()

学过网页制作的同学大多对CSS中的伪类选择器有所了解,像:link,:hover,:active,:focus,:first-child,:lang想必已经非常熟悉了,今天要说的是CSS3中新增的伪类选择器,:nth-child()和 :nth-of-type()。

:nth-child()用法

:nth-child(n)选择器匹配属于其父元素的第N个子元素,不论元素类型。在w3c中说明n可以是数字、关键词或公式。常用有4种写法。

1.具体数字

:nth-child(n):匹配父元素中第n个元素,例如:li:nth-child(3){backgroud:red;},匹配父元素中第3个子元素li的背景颜色。

2.倍数

:nth-child(an):匹配父元素中第a数倍的元素,例如:li:nth-child(3n){backgroud:red;}

3.倍数分组

:nth-child(an+b)或:nth-child(an-b):先对元素进行分组,每组有a个,b为组内成员的序号,其中字母n和加(+)减(-)号不可缺省,位置不可调换,这是该写法的标志,其中a,b均为正整数或0。如3n+1,5n-1。

4.奇偶写法

:nth-child(odd)和:nth-child(even):分别匹配序号为奇数与偶数的元素。奇数(odd)与(2n+1)结果一样;偶数(even)与(2n+0)及(2n)结果一样。

:nth-of-type的用法

:nth-of-type(n)选择器匹配属于父元素的特定类型的第N个子元素的每个元素。这个用法和:nth-child(n)用法类似,不同的是:nth-child(n)所匹配的元素必须有父元素包裹着。但:nth-of-type(n)可以匹配特定类型元素行。例如:p:nth-of-type(2){background:#ff0000;}

:nth-child()和:nth-child-type()区别

:nth-child可以选择父元素下的字元素,:nth-of-type也可以。但是它们到底有什么区别呢? 其实区别很简单::nth-of-type为什么要叫:nth-of-type?因为它是以”type”来区分的。也就是说:ele:nth-of-type(n)是指父元素下第n个ele元素, 而ele:nth-child(n)是指父元素下第n个元素且这个元素为ele,若不是,则选择失败。这里附上一个小例子:

上面这个例子,.demo li:nth-child(2)选择的节点是

而.demo li:nth-of-type(2)则选择的节点是

浏览器支持

所有主流浏览器均支持:nth-child()选择器,除了IE8及更早的版本。

未经允许不得转载:专注は互联网 · 用户 · 产品 - 极简 · 生活 · 禅修 » css3伪类选择器:nth-child() 和 :nth-of-type()

赞 (0)

扫码打Call!

分享到:更多 ()

留言 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址