伪类与伪元素的区别
标准的定义：
CSS 引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化。
伪类有：:first-child ，:link:，vistited，:hover，:active，:focus，:lang 伪元素有：:first-line，:first-letter，:before，:after
伪类与伪元素的区别
先看一个伪元素 first-line 例子。现在有一段HTML，内容是一个段落：
<p>I am the bone of my sword. Steel is my body, and fire is my blood. I have created over a thoustand blades.
Unknown to Death.Nor known to Life. Have withstood pain to create many weapon. Yet, those hands will never hold anything. So as I pray, unlimited blade works. </p>
如果我要描述这个段落的第一行，在不用伪元素的情况下，我会怎么做？想来我一定要嵌套一层 span，然后加上类名:
<p><span class="first-line">I am the bone of my sword. Steel is my body, and fire is my blood. </span>
I have created over a thoustand blades.
Unknown to Death.Nor known to Life. Have withstood pain to create many weapon. Yet, those hands will never hold anything. So as I pray, unlimited blade works. </p>
再反观一个伪类 first-child 的例子，有一个简单的列表： <ul> <li></li> <li></li> </ul> 如果我要描述 ul 的第一个元素，我无须嵌套新的元素，我只须给第一个已经存在的 li 添加一个类名就可以了：
<ul> <li class="first-child"></li> <li></li> </ul>
尽管，第一行和第一个元素，这两者的语意相似，但最后作用的效果却完全不同。所以，伪类和伪元素的根本区别在于：它们是否创造了新的元素(抽象)。从我们模仿其意义的角度来看，如果需要添加新元素加以标识的，就是伪元素，反之，如果只需要在既有元素上添加类别的，就是伪类。而这也是为什么，标准精确地使用 “create” 一词来解释伪元素，而使用 “classify” 一词来解释伪类的原因。一个描述的是新创建出来的“幽灵”元素，另一个则是描述已经存在的符合“幽灵”类别的元素。
伪类一开始单单只是用来表示一些元素的动态状态，典型的就是链接的各个状态(LVHA)。随后CSS2标准扩展了其概念范围，使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类。
伪元素则代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。
wk_ad_begin({pid : 21});wk_ad_after(21, function(){$('.ad-hidden').hide();}, function(){$('.ad-hidden').show();});
伪类和伪元素混淆的由来
最为混淆的，可能是大部分人都将 :before 和 :after 这样的伪元素随口叫做伪类，而且即使在概念混淆的情况下，实际使用上也毫无问题——因为即使概念混淆，对真正使用也不会造成多少麻烦:)
CSS Selector Level 3 为了区分这两者的混淆，而特意用冒号加以区分：
伪类用一个冒号表示 :first-child
伪元素则使用两个冒号表示 ::first-line
并且规定，浏览器既要兼容CSS1和2里既存的伪元素的单冒号表示，同时又要不兼容CSS3新引入的伪元素的单冒号表示。后来的结果大家都知道，因为低版本IE对双冒号的兼容问题，几乎所有的CSSer在写样式的时候都不约而同的使用了单冒号。这无形中，让这种混淆延续了下来。而CSS3新伪元素的使用到目前为止，还远远不成气候。
伪类和伪元素使用上需要注意的地方
明白其不同之后，就需要注意和考虑在实际使用上的一些问题。比如：伪类和伪元素的选择器特殊性(优先级)如何计算？
我在之前的 CSS选择器距离无关 一文中，翻译过CSS标准的计算选择器的特殊性这一部分，看完那部分，答案就清楚了：除了否定伪类的特殊规定外，分开各自作为真正的类和元素计算。
虽然标准以后的版本可能会允许选择器多伪元素的情况，但就目前为止，伪元素在一个选择器里只能出现一次，并且只能出现在末尾。实则，伪元素是选中了某个元素的符合逻辑的某个实际却不存在的部分，所以应用中也不会有人将其误写成多个。伪类则是像真正的类一样发挥着类的作用，没有数量上的限制，只要不是相互排斥的伪类，也可以同时使用在相同的元素上。关于CSS3选择器的详细解释，推荐 rogerjohansson 的 CSS 3 selectors explained。
