由:before和::before引发的伪类以及伪元素思考

又是踩坑的一天！今天项目中看到了样式表中对一个类添加了::before，自己心想以前用:hover的时候是单引号，这里用双引号是什么用法。自己想了一会也犯嘀咕，好像平时确实没有太注意这个写法问题，上网搜了一下，特此记录。

区别

首先先给出这两种写法的区别吧，先解决上面的疑惑。

• 单冒号用于CSS3伪类以及CSS2中的伪类以及伪元素
• 双冒号用于CSS3伪元素

要完全理解这两句话，需要先弄清楚伪类以及伪元素的区别

伪类

从名称的“类”不难推测，本质上是为了弥补常规css选择器的不足，用于选择DOM树之外的信息或不能用简单选择器进行表示的信息。伪类存在DOM文档中。粗暴一点的话，可以将伪类理解成一个特殊的类选择器。

伪元素

伪元素不存在DOM中，是虚拟的元素，会创建一些抽象元素，本质上创建了一个有内容的虚拟容器。而且伪元素一定要配合content属性来使用。伪元素实际上是在CSS渲染层加入的，所以不能通过js来控制。

根本区别

最根本的区别就是伪元素创造了新元素，而伪类并没有。

了解了伪类和伪元素，那我们进一步解释两种写法的区别。单引号的写法在css2中就已经使用，且css2中的伪类和伪元素都是用单引号的，而在css3中，为避免混淆，对伪类以及伪元素进行了区分，即伪类使用单冒号，伪元素使用双冒号。同时，为了向下兼容，对于在css2中已经存在的伪元素，在css3中使用单冒号效果也是一样的，但是在css3中新加入的伪元素则不允许使用单冒号。总结一下就是：css2中已经存在的伪元素，单双冒号等效；css3新加入的伪元素只能双冒号(如::selection)。
需要注意的是，css2的写法兼容性会更强，所以在需要兼容ie的情况下，单引号会更安全。

常见伪类以及伪元素

在实际应用中，有一些伪类和伪元素是常常使用的，以下给出表格：

伪类

伪元素