CSS选择器 nth-child 和 nth-of-type

Css 3 中两个新的选择器 nth-child 和 nth-of-type 都可以选择父元素下对应的子元素，但它们到底有什么区别呢？

 

:nth-child(n) 选择器匹配属于其父元素下的第n个子元素，不论元素的类型。

:nth-of-type(n) 结构性伪类选择器，匹配父元素下使用同种标签的第n项子元素，它的选择范围是父元素下某一种元素类型的集合。

 

例如：

　　p:nth-child(2) 表示这个元素是p标签，并且是第二个子元素，两个条件必须满足 

　　p:nth-of-type(2) 表示父标签下的第二个p元素，无论其前后有几个标签 

 

nth-child 的用法：

　　:nth-child(n) 选取第n个标签，“n”表示从整数，下同，“n是你想要的数字”

　　:nth-child(n+4) 选取大于等于4标签， 

　　:nth-child(-n+4) 选取小于等于4标签， 

　　:nth-child(2n) 选取偶数标签，等同于 :nth-child(even)

　　:nth-child(2n-1) 选取奇数标签，等同于 :nth-child(odd)

　　:nth-child(3n+1) 隔二取一，每隔两个元素选取一个

　　:last-child 选取最后一个标签

　　:nth-last-child(n) 选取倒数第几个标签,

　　:nth-child(n+4):nth-child(-n+8)  选中第4-8个子元素

　　nth-child(n+2):nth-child(odd):nth-child(-n+9) 选中第2位到第9位，并且为奇数的

 

　　:first-child 和 :last-child 被IE 7支持，但是知道IE9才支持剩下的选择器。如果你担心 IE，可以使用 Selectivizr。

 

转载于:https://www.cnblogs.com/dhui/p/10266870.html