CSS伪元素和伪元素的区别的详细解释
伪元素和伪元素并不是真正意义上的HTML类和元素，它们的存在是为了方便状态和位置的风格定义，它们之间有什么区别呢这就是我们今天需要讨论的问题。首先，阅读W3C的两个定义：
CSS伪类用于向某些选择器添加特殊效果。CSS伪元素用于向某些选择器添加特殊效果。
可以清楚地看到，第一个都与选择器有关，第二个是添加一些特殊的效果。
伪类
伪元素种类
差异
下面是伪类：第一个子元素和伪元素：第一个比较字母。
复制代码代码如下所示：
第一个孩子{颜色：红色}
弗斯特
二
伪类：第一个子元素的第一个子样式
如果我们不使用伪类并希望达到上述效果，我们可以做到这一点：
复制代码代码如下所示：
第一个孩子{颜色：红色}
弗斯特
二
也就是说，我们将一个类添加到第一个子元素中，然后定义类的样式：
复制代码代码如下所示：
p：第一个字母{颜色：红色}
我是斯蒂芬·李。
伪元素：第一个字母的第一个字母
那么，如果我们不使用伪元素来达到上述效果，我们该怎么办呢
复制代码代码如下所示：
第一个字母{颜色：红色}
我是斯蒂芬·李。
也就是说，我们在第一个字母中添加一个跨度，然后将样式添加到跨度中。
两者之间的差别已经出来了：
伪类的效果可以通过添加一个实类来实现，伪元素的效果可以通过添加一个实元素来实现，这就是为什么它们被称为伪类，伪元素。
总结
伪元素和伪类是如此的混淆，因为它们的影响在写作上是相似的，相似的。但事实上，为了区分它们，CSS3已明确指定的伪类是由一个冒号来表示，而伪元素是由两个冒号表示。
伪类：：伪元素
但由于兼容性问题，目前多数是统一的单结肠。但是当我们撇开兼容性问题时，我们应该养成良好的习惯来区分两者。
简单地说，伪元素的权重比伪类的权重高。例如，一个容器元素和伪类相同的属性，但价值是不同的，使用伪元素。一个页面只使用一次，从规范的角度来看，和一个伪类可以多次使用。伪元素产生无法看到DOM对象，但可以操作；伪类在Dom元素的不同状态；