css - 伪选择器中两个双点和一个点有什么区别

Question

我有点不明白 :before 和 ::before 之间有什么区别。我应该使用哪一个？

Answer 1

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

这是作为 CSS3 的一部分由万维网联盟 (W3C) 引入的，但是由于伪元素是在此语法差异之前引入的，因此浏览器同时支持 ::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 选择器建议:

This :: notation is introduced by the current document in order to establish a discrimination between pseudo-classes and pseudo-elements.
For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2 (namely, :first-line, :first-letter, :before and :after).
This compatibility is not allowed for the new pseudo-elements introduced in this specification.

引用资料:

• CSS 2.1 Recommendation .
• Pseudo-elements .