伪类与伪元素的区别
区别：它们是否创造了新元素。
伪元素：不存在于DOM文档中，伪元素用于创建一些不在文档树中的元素，并为其添加样式。它是虚拟的元素，是创造新元素，代表某个元素的子元素，则个子元素逻辑上存在，但却并不存在于文档树中。
例如：我们可以通过 :before 来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。
伪元素选择符：
伪类：存在于DOM文档中，伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。
例如：当用户悬停在指定的元素时，我们可以通过 :hover 来描述这个元素的状态。虽然它和普通的 CSS类相似，可以为已有的元素添加样式，但是它只有处于 DOM 树无法描述的状态下才能为元素添加样式，所以将其称为伪类。
举个例子：
如果我们想要让第一个p标签为红色
- 使用伪类p:first-child：
- 如果不使用伪类，可以添加一个类class来实现同样效果：
- 使用伪元素的方法：
- 不使用伪元素实现同等效果：
- 总结：
伪类的效果可以通过添加实际的类来实现，
而伪元素的效果需要通过添加实际的元素来实现
因此它们俩的本质区别就是是否抽象创造了新元素
其中，伪类只能使用 :
而伪元素既可以使用：，又可以使用 :: - :before和::before的异同：
- 相同：:before和::before写法是等效的; :after和::after写法是等效的
- 不同：:before/:after是Css2的写法，::before/::after是Css3的写法，:before/:after 的兼容性要比::before/::after好
伪类与伪元素的应用：
参考文章：
前端面试题-伪类和伪元素
伪元素和伪类的区别总结