CSS中伪类和伪元素的区别

伪类和伪元素的根本区别在于：它们是否创造了新的元素(抽象)。从我们模仿其意义的角度来看，如果需要添加新元素加以标识的，就是伪元素，反之，如果只需要在既有元素上添加类别的，就是伪类。

最为混淆的，可能是大部分人都将 :before 和 :after 这样的伪元素随口叫做伪类，而且即使在概念混淆的情况下，实际使用上也毫无问题——因为即使概念混淆，对真正使用也不会造成多少麻烦:)
CSS Selector Level 3 为了区分这两者的混淆，而特意用冒号加以区分：

伪类用一个冒号表示 :first-child
伪元素则使用两个冒号表示 ::first-line

目前为止，伪元素在一个选择器里只能出现一次，并且只能出现在末尾。实则，伪元素是选中了某个元素的符合逻辑的某个实际却不存在的部分，所以应用中也不会有人将其误写成多个。伪类则是像真正的类一样发挥着类的作用，没有数量上的限制，只要不是相互排斥的伪类，也可以同时使用在相同的元素上。

伪类的例子有：

:hover

:active

:first-child

:visited

等。

伪元素的例子有：

:first-line

:first-letter

:after

:before