CSS3伪类和伪元素的特性和区别

前端er们大都或多或少地接触过CSS伪类和伪元素，比如最常见的:focus,:hover以及<a>标签的:link、visited等，伪元素较常见的比如:before、:after等。

其实上面提到的这些伪类和伪元素都是CSS1和CSS2中的概念，CSS1和CSS2中对伪类的伪元素的区别比较模糊，甚至经常有同行将:before、:after称为伪类。CSS3对这两个概念做了相对较清晰地概念，并且在语法上也很明显的讲二者区别开。

伪类 - pseudo classes

首先看看CSS2中对伪类的定义：

CSS 伪类用于向某些选择器添加特殊的效果。

单单看定义完全不懂在讲什么。截止CSS2，伪类有以下几种（偷个懒，截图引自W3School）：

然后是CSS3对伪类的定义：

The pseudo-class concept is introduced to permit selection based on information that lies outside of the document tree or that cannot be expressed using the other simple selectors.

A pseudo-class always consists of a "colon" (