CSS3中:nth-child()和nth-of-type()的却别

      今天重温了下的CSS3的伪类选择器部分，总结下。

1.CSS3新增伪类

     :nth-child(num)          :nth-last-child(num)          :nth-of-type(num)        :nth-last-of-type(num)

     :first-of-type               :last-of-type              :last-child           :only-child             :only-type

     :root 匹配文档的根元素                         :empty        

     :enabled  /  :disabled    控制表单控件的禁用状态

     :checked     单选框或复选框被选中

     :target  匹配URI中的锚点

     :not

CSS3新增的这些伪类都是挺适用的，比如:nth-child() , :nth-last-child()等。不过自己对:nth-child()和:nth-of-type()的区别却并不是很清晰。

比如p:nth-child(2)和p:nth-of-type(2)，经过实际的几种情况测试

                              

                               

                               

    经过这几个测试可以看出：

           对于 p:nth-child(num)    首先是p元素，然后是父标签的第num个元素

           对于 p:nth-of-type(num)      选择父标签的第num个元素

    在上边的第三个测试中，把第二个p改成了div，不再是p元素，所以 :nth-child()就没有符合要求的，但是 :nth-of-type是选择父标签中的第2个p标签，所以具有符合条件的元素。

2. CSS3引入的唯一伪元素 ::selection