我们在平时工作中或者看到其他一些前端人员写伪类选择器的时候经常能看到有时候一个冒号，有时候两个冒号，而且似乎都是可以的，所以，这两者到底有什么区别呢？

这里面其实有一个很大的区别，就是 hover 和 after 虽然我们在早期都管他们叫伪类，但是实际上他们俩的作用并不一样，一个类似于JS效果，一个类似于一个元素。

所以在后来，很多程序员不干了，觉得其实他们并不一样，严谨的 W3C 就把类似于元素的给专门剥离出来了，叫专门叫做伪元素。

然后，W3C官方也给这两者进行了的定义：

CSS 伪类用于向某些选择器添加特殊的效果。

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

可以明确两点，第一两者都与选择器相关，第二就是添加一些“特殊”的效果。这里特殊指的是两者描述了其他 CSS 无法描述的东西。

所以最后的结论就是 ：伪类偏向于元素的动作效果，伪元素偏向于元素的属性。

而最早的并没有对这些进行区分，所以最早的伪类都是一个冒号。

所以我们最早看到的:after、:before虽然属于伪元素，但是已经属于最早都定型了，所以就一直在那放着了。

然后 CSS3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。所以对于CSS2之前已有的伪元素，比如:before，单冒号和双冒号的写法::before作用是一样的。

简单来说就是一场最早官方没想好，后期想分类出来，但是之前的也只就能这样的一个事件了，用咱们程序员的话就解释为：历史遗留问题。

咱们看一下目前的伪类：

伪元素（单双冒号都可以）：