总结在前：
0. 参考资料
1. 伪类和伪元素是不同的两种东西。
2. 伪类和伪元素都属于CSS选择器。
3. CSS引入伪类和伪元素是为了实现基于文档树之外的信息，i.e. 段落的第一行，的格式化。
4. 伪类和伪元素都不出现在源文件和文档树中。
伪类：一开始单单只是用来表示一些元素的动态状态，典型的是<a>的 LVHA四个状态，CSS2标准扩展了概念范围， 使其成为了所有逻辑上存在，但在文档树中却无须标识的分类。
伪元素：代表某个元素的子元素，虽然这个子元素在逻辑上存在， 但是不存在于文档树中。
5. CSS3中为区分二者使用冒号，但是还没有完全实现，目前都是单冒号：
-- 伪类用一个冒号 :first-child
-- 伪元素用两个冒号 ::first-line
详细一点谈：
在CSS中可以将类选择器视为正则中的模式， div.value 等同于 div[class~=value] ,CSS中的样式通常依附于一个元素在文档树中的位置，这个模型对于大多数情况来说是足够的，但是一些常见的版式状态不能应用于文档树的结构，如first-line，没有简单的CSS选择器可以应用到它，而且它也是动态变化的。
伪类： 伪类对元素的划分是基于特征的，而不是基于他们的名字、属性或者内容，原则上特征是不可以从文档树中推断得到的（那是怎么实现的呢？）。伪类可以是动态的，在用户和文档进行交互的时候，一个元素可以得到或者失去一个伪类。 :first-child 和 :lang 某些情况可以用文档树推断，是例外。伪类有： :first-child, :link, :vistited, :hover:, active:focus, :lang
伪元素：创造关于文档语言能够制定的文档树之外的抽象。 如： 文档语言不能提供访问元素内容的第一个letter或者第一行的机制，而使用伪元素可以办到。伪元素还给不存在源文件中的内容分配样式，i.e. :before 和 :after
伪类可以独立于文档的元素来分配样式，而且可以分配给任何元素(最常见的是 a 元素，也可以应用到其他元素上如 li )，逻辑上和功能上和类类似(i.e.都有匹配的作用)，但是其是预定义的，不存在于文档树中且表达方式也不同，所以叫伪类。
伪元素所控制的内容和一个元素控制的内容是一样的， 但是伪元素不是真正的元素，不存在于文档树中(可以动态添加到文档中)， 不是真正的元素。