相关知识点

• 单冒号（:）用于CSS3伪类，双冒号（::）用于CSS3伪元素。（伪元素由双冒号和伪元素名称组成）

• 双冒号是在当前规范中引入的，用于区别伪类和伪元素。不过浏览器需要同时支持旧的已经存在的伪元素写法，例如 :first-line 、:first-letter 、:before 、:after 等，而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号写法。

• 想让插入的内容出现在其他内容前，使用 ::before ，反之使用 ::after ，在代码顺序上，::after 生成的内容比 ::before 生成的内容靠后。如果按堆栈视角，::after 生成的内容会在::before 生成的内容之上。

回答

在css3中使用单冒号来表示伪类，用双冒号来表示伪元素。但是为了兼容已有的伪元素的写法，在一些浏览器中也可以使用单冒号
来表示伪元素。

伪类一般匹配的是元素的一些特殊状态，如hover、link等，而伪元素一般匹配的特殊的位置，比如after、before等。

补充：伪类与伪元素的区别

CSS引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分。比如一句话中的第一个字母，或者是列表中的第一个元素。

伪类用于当已有的元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定元素时，我们可以通过 :hover 来描述这个元素的状态。

伪元素用于创建一些不在文档树中的元素，并为其添加样式。它们允许我们为元素的某些部分设置样式。比如我们可以通过 ::before 来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

有时你会发现伪元素使用了两个冒号（::）而不是一个冒号（:）。这是CSS3的一部分，并尝试区分伪类和伪元素。大多数浏览器都支持这两个值。按照规则应该使用两个冒号（::）而不是一个冒号（:），从而区分伪类和伪元素。但是由于在旧版本的W3C规范并未对此进行特别区分，因此目前绝大多数的浏览器都支持使用这两种方式表示伪元素。

详细可参考：《总结伪类与伪元素》

来自：Github，作者：CavsZhouyou
链接：https://github.com/CavsZhouyou/Front-End-Interview-Notebook/blob/master/Css/Css.md