【CSS3】nth-child与nth-of-type的区别

admin

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。
n 可以是数字、关键词或公式。
对于以下代码的理解：
p:nth-child(2)
{
background:#ff0000;
}  

首先确定其父元素，然后找第二个元素，判断是否为p，如果是，则样式匹配，如果不是，则样式不变化。

nth-of-type() 选择器，该选择器选取父元素的第 N 个指定类型的子元素。
对于以下代码的理解：
p:nth-child(2)
{
background:#ff0000;
}  

同样，也是首先确定其父元素，只不过不是先找父元素内的第二个元素，而是先寻找p元素，然后匹配第2个p元素，如找不到，则样式不变。

所以：nth-child的第一个元素不保证是p，当只有p排序恰巧在第2位元素时匹配，其兄弟姊妹会影响其作用。
nth-of-type的所有p元素，第1位元素必须为p，而不关心父元素是否有其它兄弟姊妹。

参考：http://www.w3school.com.cn/cssref/selector_nth-child.asp