:before 和 ::before 有什么区别？答案

【问题标题】：What is the difference between :before and ::before?:before 和 ::before 有什么区别？
【发布时间】：2011-11-11 17:49:30
【问题描述】：

我刚刚看到一个包含::before 标签的CSS 代码。我查看了MDN 以了解::before 是什么，但我真的不明白。

有人可以解释它是如何工作的吗？

它会在我们通过 CSS 选择之前创建一个 DOM 元素吗？

【问题讨论】：

Afaik，CSS 工作组决定在伪元素前面加上一个冒号，以区别于只有一个冒号的伪类。
... 由于双冒号符号没有在 IE8 中实现，我们必须等到它从市场上被淘汰（比如 2016 年左右），然后才能开始使用::before。干得好，微软-.-
自 CSS1 以来，伪元素就已经存在。第一个伪元素是:first-letter 和:first-line。

【解决方案1】：

根据那些文档，它们是等价的：

element:before  { style properties }  /* CSS2 syntax */

element::before { style properties }  /* CSS3 syntax */

唯一的区别是双冒号用在 CSS3 中，而单冒号是旧版本。

推理：

在 CSS 3 中引入 ::before 符号是为了建立一个伪类和伪元素的区别。浏览器也接受符号 :before 在 CSS 2 中引入。

【讨论】：

【解决方案2】：

这将伪元素与伪类区分开来。

【讨论】：

CSS3 中引入了 ::before 表示法（带有两个冒号），以便区分伪类和伪元素。浏览器也接受在 CSS 2 中引入的符号 :before。来源：developer.mozilla.org/en-US/docs/Web/CSS/::before 和之前一样，是伪 ELEMENT 而不是伪 CLASS（如 :hover）两个冒号更好（因此遵循 CSS3 标准）。

【解决方案3】：

我检查了MDN 和w3.org，我能想到的最好的结果是:: 用于结构更改，: 用于样式。

出于兼容性原因，它们目前可以互换。

它似乎将:link（例如）与:before（这是一个结构更改）分开，<a> 的样式。

: 用于样式，:: 用于结构。

【讨论】：

【解决方案4】：

一种是 CSS2 (:before) 方式，另一种是 CSS3 (::before)。目前它们在支持 CSS2 和 CSS3 的浏览器中可以互换。

【讨论】：

【解决方案5】：

它们本质上是同一个意思。 :: 是在 CSS3 中引入的，以帮助区分伪元素（如 :before 和 :after）和伪类（如 :link 和 :hover）。

【讨论】：