CSS伪类与CSS伪元素的区别及由来具体说明

关于两者的区别，其实是很古老的问题。但是时至今日，由于各种网络误传以及一些不负责任的书籍误笔，仍然有相当多的人将伪类与伪元素混为一谈，甚至不乏很多CSS老手。早些年刚入行的时候，我自己也被深深误导，因为论坛里的帖子大多不关心这种概念的细微差别，即使有人出来说一句：“这两个是不同的”，也只是被更多的帖子淹没掉而已。所以觉得有必要写下这些我所知的部分，这里着重写的是为什么这两者不同，以及一些平时容易错过的细节。

无论是伪类还是伪元素，都属于CSS选择器的范畴。所以它们的定义可以在CSS标准的选择器章节找到。分别是 CSS2.1 Selectors 和 CSS Selector Level 3，两者都已经是推荐标准。
标准的定义

在CSS2.1里，5.10 Pseudo-elements and pseudo-classes 描述了这两个概念的由来，它们是被一同提及的。但到了 Selector Level 3 里，它们就被分开到两个小节里加以区分。但无论如何，伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述，比如CSS没有“段落的第一行”之类的选择器，而这在一些出版场景里又是必须的。用标准里的话说：
CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.
简单翻译一下，就是：
CSS 引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化
这么说很抽象，其实就是为了描述一些现有CSS无法描述的东西。缺少什么，则引入什么，不管是标准，还是人，都是如此成长而来。

伪类与伪元素的区别
这里我大可以列一个表格，把所有的伪类和伪元素分开罗列，但这未免太形式化，与其记住“哪些是哪些不是”，不如真正地加以区分。伪类和伪元素本身就有一个根本的不同之处，这点直接体现在了标准的描述语句上。
先看一个伪元素 first-line 例子。现在有一段HTML，内容是一个段落：

本来只是想稍稍写点，不想话又多了…到了最后，我一度觉得自己还漏了很多，不断在脑海里搜索，但可能只能下次在补充了。写这篇的目的是为下篇《CSS伪类与CSS伪元素的典型应用》做个铺垫，不想理论的东西一写自己就开始废话连篇了，惭愧…回看本篇，自己的思路跳的有些乱了，洋洋洒洒这么多字，可能概括起来没几句话，但如果希望尽可能表达清楚，则又免不了冗余过头。理论总是显得枯燥了些，下篇闲谈应用应该不至于这么沉闷:)