伪元素和伪类的区别

1.区别

伪类和伪元素的根本区别在于：它们是否创造了新的元素。

伪元素/伪对象：不存在在DOM文档中，是虚拟的元素，是创建新元素。代表某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。

2. 伪元素

伪元素既然带一个“元素”，说明它和 p ，a ，h1 等一样，可以包裹住页面的一部分内容并对其中的内容施加一定的影响。
比如，对于 <p>how good a day</p> ，我们可以在样式表中写 p {} 来选中该元素包裹的内容并设定某些样式。而伪元素与之类似，以 :first-letter 为例，就好像在 <p>how good a day</p> 中隐式地声明了一对儿新元素，包裹住了这段文本的首字母，即：<p><first-letter>h</first-letter>ow good a day</p> ，这样我们就可以在样式表中写 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”类，用来表明自己是其父元素里面的第一个子元素。

伪元素和伪类的区别

原文：https://www.cnblogs.com/811yb/p/14363812.html