:nth-child和:nth-of-type的区别

今天看到:nth-child和:nth-of-type的时候突然发现自己好像忘记了，于是就写下来，便于以后自己查看，有错误的地方还希望大家指正.

首先解释一下字面意思吧：这两个都是css3中的伪类选择器，selector(这个通常为标签选择器):nth-child(n)表示的是选择某个父元素中的第n个子元素，并且这第n个子元素是该selector元素，否则就选择不了。 selector(这个通常为标签选择器):nth-of-type(n)表示选择某个父元素中的第n个selector元素。

   

       
• 我是ul下的第一个元素，也是第一个li元素

       

我是ul下的第二个元素，也是第一个p元素


       
• 我是ul下的第三个元素，也是第二个li元素

   

.demo ul li:nth-child(1)选择是ul的第一个元素，并且是一个li元素，符合，所以选择成功。

.demo ul li:nth-child(2)选择是ul的第二个元素，并且是一个个li元素，不符合，所以选择不成功。

.demo ul p:nth-child(2)选择是ul的第二个元素，并且是一个p元素，符合，所以选择成功。

.demo ul li:nth-child(3)选择是ul的第三个元素，并且是一个li元素，符合，所以选择成功。

.demo ul li:nth-of-type(1)选择的是ul下的第一个li元素

.demo ul li:nth-of-type(2)选择的是ul下的第二个li元素

.demo ul p:nth-of-type(1)选择的是ul下的第一个p元素