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

Question

我有点不明白有什么区别:before和::before例如.我应该使用哪一个？

Answer 1

这是伪类区分(如:hover,:focus,:active)和伪元素(如::before,::after,::first-line).

这是由万维网联盟(W3C)作为CSS3的一部分引入的,但是因为在这种语法差异之前引入了伪元素,所以浏览器支持两者::before和:before.

根据MDN(Mozilla开发者网络)的参考资料:

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.