CSS的伪元素和伪类的区别

其实明白过来以后，再回头去想为什么自己会混淆伪元素（pseudo-elements）和伪类（pseudo-classes）的概念，反而会觉得难以理解。毕竟，单从名字就能一眼看出它们的区别，一个是假的元素，另一个是假的类。
PS：本文不讨论伪元素和伪类在书写等方面的区别。

1. 温故一下什么是元素，什么是类

元素指的是 HTML 文档中的标签，它是 DOM 树的一部分。而类是元素上的一个属性，是人为规定的当前元素的一个类别。
CSS 选择器有很多种。其中元素选择器说的是我们可以直接通过元素名称选中文档中的所有该元素，比如我们可以用 div 代表 HTML 文档中的所有 div 元素。类选择器说的是我们可以用类（元素的 class 属性）选中文档中所有包含该类的元素。

2. 说说伪元素

伪元素既然带一个“元素”，说明它和 p ，a ，h1 等一样，可以包裹住页面的一部分内容并对其中的内容施加一定的影响。
比如，对于

how good a day

，我们可以在样式表中写 p {} 来选中该元素包裹的内容并设定某些样式。而伪元素与之类似，以 :first-letter 为例，就好像在

how good a day

中隐式地声明了一对儿新元素，包裹住了这段文本的首字母，即：

how good a day

，这样我们就可以在样式表中写 p:first-letter {} 来选中 p 元素里面的 first-letter 元素包裹的内容并设定样式了。
伪元素既然还带一个“伪”，说明它其实在 DOM 树中并不存在，只是逻辑上存在所以我们抽象出来的一个元素而已。
CSS 规范中讲：

They are used to create abstractions about the document tree beyond those provided by the document tree.

“它们被用来创建 DOM 树既有的元素之外的抽象元素”这句话就是表达了这个意思。
所以，归根到底，伪元素只是假定 DOM 树中有那样一个元素。

3. 再说说伪类

一言以蔽之，文档树的某个元素上并没有某个类，但是就好像在某种条件下，这个元素上被声明了这个类一样。
最典型的就是作用在 a 标签上的伪类 :hover，我们并没有在 a 元素上声明一个叫 hover 的类，但是当我们把鼠标悬停在 a 元素上时，这个 a 元素上就好像有一个 hover 类，代表光标悬停在这个 a 元素上那个时间点的 DOM 树中的 a 元素，有一种莫名穿越的感觉。
还有一个生动的例子可以帮助我们分清伪元素和伪类，即 :first-child 容易被误解为“某个元素下的第一个子元素”，而其实它指的是当前元素就好像有一个“first-child”类，用来表明自己是其父元素里面的第一个子元素。

4. 总结

其实你看，既然一个是元素，一个是类，那么在样式表中，伪元素和它前面的元素体现出来的其实是一种元素和元素之间的位置关系，要么是某个元素内部最前面（:before）的子元素，要么是它内部最后面（:after）的子元素，要么是元素里面的段落的第一行（:first-line），要么是它里面的文本的首字母（:first-letter）。它们都是直接作用在DOM树上的，老子本身就是元素，在法律地位上和它前面的元素平级。而伪类和它前面的元素体现出来的是一种包含关系，依赖关系，该元素就好像拥有这个类，这个类就好像被加在这个元素上一样。伪类作用在DOM树上的元素上，只是用来描述这个类的状态的，和普通的 class 没有本质上的区别。所以，当我们看到 元素:伪元素这种形式的时候，CSS 样式必然最后作用在这个伪元素的位置上，而看到 元素：伪类的时候，CSS 样式必然最后作用在元素上。反过来，我们也可以通过最终的效果作用在什么上来判断它是伪元素还是伪类。
所以如果有人再问 CSS 的伪元素和伪类有什么区别，你可以这样回答：
“伪元素”和“伪类”都带一个“伪”字，那是他们的共同点，所以，他们的区别就是一个本质上是元素，另一个本质上是类。