两个双点和一个伪选择器有什么区别?

Question

我有点不明白:before和::before之间的区别。我应该用哪一个?

Answer 1

这是为了区分伪类(如:hover、:focus、:active)和伪元素(如::before、::after、::first-line)。

这是由万维网联盟(W3C)作为CSS3的一部分引入的，但由于伪元素在这种语法区分之前被引入，浏览器同时支持::before和:before。

根据MDN (Mozilla Developer Network)的参考:

Browser            |  Lowest Version    |    Support of
-------------------+--------------------+------------------
Internet Explorer  |  8.0               |   :pseudo-element
                   +--------------------+------------------
                   | 9.0                |   :pseudo-element
                   |                    |   ::pseudo-element
-------------------+--------------------+------------------
Firefox (Gecko)    | 1.0 (1.0)          |  :pseudo-element
                   +--------------------+------------------
                   | 1.0 (1.5)          |  :pseudo-element
                   |                    |  ::pseudo-element
-------------------+--------------------+------------------
Opera              | 4.0                |  :pseudo-element
                   +--------------------+------------------
                   | 7.0                |  :pseudo-element
                   |                    |  ::pseudo-element
-------------------+--------------------+------------------
Safari (WebKit)    | 1.0 (85)           |  :pseudo-element
                   |                    |  ::pseudo-element
-------------------+--------------------+------------------

注意，来自CSS选择器推荐:

当前文档引入::符号是为了区分伪类和伪元素。
为了与现有样式表兼容，用户代理还必须接受先前在CSS级别1和2(即:first-line、:first-letter、:before和:after)中引入的伪元素的一冒号符号。本规范中引入的新伪元素不允许这种兼容性。

引用:

CSS 2.1推荐。
• 伪元素。

Answer 2

::before是更现代的版本。所有以::开头的都是伪元素，所有以:开头的都是伪类。这个区别是从CSS3开始的。

使用::before来使用这个新的标准版本或者使用:before来向后兼容，因为所有的浏览器都理解:before，但并不是所有的浏览器都理解::before。