：before和:: before之间有什么区别？

78

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

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

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

css css-selectors

— 莫森
source

1

CSS工作组Afaik决定在伪元素前加上一个冒号，以区别于仅具有一个冒号的伪类。

— 森达维达斯

5

...并且由于IE8中未实现双冒号表示法，因此我们必须等到它从市场上被淘汰（例如在2016年左右），然后才能开始使用::before。伟大的工作，微软-.-

— 森那维达斯

1

自CSS1以来，伪元素就已经存在。第一个伪元素是:first-letter和:first-line。

— BoltClock

16

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

伪类和伪元素之间的区别在http://www.d.umn.edu/~lcarlson/csswork/selectors/pseudo_dif.html中进行了描述

— 罗伯特·利维
source

9

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

— JoostS

66

根据这些文档，它们是等效的：

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

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

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

推理：

CSS 3中引入了:: before表示法，以便在伪类和伪元素之间建立区别。浏览器还接受：在CSS 2中引入的符号。

— 克里斯·拉普兰特
source

12

它们本质上是同一件事。将::在CSS3引入伪元素（如：前和：后）之间的帮助descriminate和伪类（如：link和：悬停）。

— 普罗迪森
source

6

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

由于兼容性原因，它们当前可以互换。

它似乎分离:link（例如），该样式<a>，从:before（这是一个结构变化）。

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

— 单数
source

2

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

这是一个很好的解释：http : //www.impressivewebs.com/before-after-css3/

— 01
source