伪类和伪元素的区别（结论）

首先，阅读 w3c 对二者的定义：

• CSS 伪类用于向某些选择器添加特殊的效果。
• CSS 伪元素用于将特殊的效果添加到某些选择器。

能够明确两点，第一二者都与选择器相关，第二就是添加一些“特殊”的效果。这里特殊指的是二者描述了其余 css 没法描述的东西。

伪类种类

伪元素种类

区别

说人话：伪类的效果能够经过添加一个实际的类来达到，而伪元素的效果则须要经过添加一个实际的元素才能达到，这也是为何他们一个称为伪类，一个称为伪元素的缘由。

或者：

一、伪类选择器：
条件1、根据元素不一样的状态，自动选择不一样的样式。
或条件2、直接添加一个class（类），给这个class设定特殊的样式。

二、伪元素选择器：
    (2.1)须要设置特殊效果的内容放到一个元素（标签）里面 span
    (2.2)在添加一个class，对class设置特殊样式。

总结

伪元素和伪类之因此这么容易混淆，是由于他们的效果相似并且写法相仿，但实际上 css3 为了区分二者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。

:Pseudo-classes
::Pseudo-elements

但由于兼容性的问题，因此如今大部分仍是统一的单冒号，可是抛开兼容性的问题，咱们在书写时应该尽量养成好习惯，区分二者。