关于css3中伪类选择器:nth-child()与:nth-of-type()的区分

这两个选择器都是作用于子类。

div :nth-child(n) 可以这样表明，不需要在:nth-child()前面接标签名。表示意思是，直接选取当前div下 n个子元素（即所有子元素）。

在:nth-child 前面接选择器仅仅是对nth-child进行进一步筛选。

例如：

 div p:nth-child(2)  表达意思是： 选取div标签下第二个子元素，然后判断当前子元素是不是p标签，如果是，则样式作用到p标签上。否则，将不会作用上。

 

:nth-of-type, 则与之有些不同。

它是直接作用到子元素类型，然后判断它是第几个，如果满足，则生效。

 

例如：

div p:nth-of-type(2) 表达意思是：选取div下的p标签，然后判断这个p标签是不是这个div里面的第二个p元素，如果是，则生效。

 

例子：

<div>

　　<p>first</p>

　　<span>s1</span>

　　<span>s2</span>

　　<span>s3</span>

　　<p>second</p>

</div>

 

希望您能实际去使用下，这样才能理解这两个伪类选择器之间的不同。