css3新增伪类选择器详解

css3新增伪类选择器详解：

第一类：

:first-child      当前元素的父元素的第一个子元素就是它本身
:last-child      当前元素的父元素的最后一个子元素就是它本身

第二类：

:nth-child()   匹配父元素下指定子元素，在所有子元素中排序第n
:nth-last-child()   匹配父元素下指定子元素，在所有子元素中排序第n，从后向前数

第三类：

:first-of-type()  匹配父元素下指定子元素，在同类子元素中排序第一个
:last-of-type()  匹配父元素下指定子元素，在同类子元素中排序倒数第一个

第四类：

:nth-of-type(n)  匹配父元素下指定子元素，在同类子元素中排序第n个
:nth-last-of-type(n)  匹配父元素下指定子元素，在同类子元素中排序倒数第n个

第五类：

:root 选择文档的根元素，等同于 html 元素
:empty 选择没有子元素的元素
:target 选取当前活动的目标元素
:not(selector) 选择除 selector 元素意外的元素
:enabled 选择可用的表单元素
:disabled 选择禁用的表单元素
:checked 选择被选中的表单元素
:after 在元素内部最前添加内容
:before 在元素内部最后添加内容
::selection 选择被用户选取的元素部分
:first-line 选择元素中的第一行
:first-letter 选择元素中的第一个字符

伪类和伪元素的区别？

参考原文： 伪元素和伪类的区别总结

伪类和伪元素的根本区别在于：它们是否创造了新的元素。
伪元素：不存在在DOM文档中，是虚拟的元素，是创建新元素。代表某个元素的子元素，这个子元素虽然在逻
辑上存在，但却并不实际存在于文档树中。

 伪类：存在DOM文档中，逻辑上存在但在文档树中却无须标识的“幽灵”分类。
伪类选择符

伪类的效果可以通过添加实际的类来实现
伪元素的效果可以通过添加实际的元素来实现
所以它们的本质区别就是是否抽象创造了新元素

注意：
伪类只能使用“：”
而伪元素既可以使用“:”，也可以使用“::”
因为伪类是类似于添加类所以可以是多个，而伪元素在一个选择器中只能出现一次，并且只能出现在末尾

单冒号和多冒号的区别？

:after/::after和:before/::before的异同

相同点:
都可以用来表示伪类对象，用来设置对象前的内容
:before和::before写法是等效的; :after和::after写法是等效的

不同点:
:before/:after是Css2的写法，::before/::after是Css3的写法
:before/:after 的兼容性要比::before/::after好 ，
不过在H5开发中建议使用::before/::after比较好

注意：
伪对象要配合content属性一起使用
伪对象不会出现在DOM中，所以不能通过js来操作，仅仅是在 CSS 渲染层加入
伪对象的特效通常要使用:hover伪类样式来激活