css - 这两个选择器有什么区别？

Question

我看到了两种不同风格的定义伪元素，如下所示：

#div::after { content: ''; display: block; }
#div:after { content: ''; display: block; }  

它们之间有什么区别，我应该使用什么方式？

Answer 1

这将伪元素与伪类区分开来。但实际上它们是相同的，只是在 CSS3 中引入:双冒号时，单冒号用于 CSS2 语法。::因此，如果您担心浏览器兼容性，您应该坚持使用:after

Answer 2

::after是 CSS 3 表示法。这是根据选择器级别 3 模块推荐使用的。使用较新语法的唯一问题是您将遇到 IE7/8 兼容性问题

重点也是要区分伪元素和伪类（只使用一个冒号）

从选择器级别 3：

“当前文档引入了这个 :: 表示法，以便在伪类和伪元素之间建立区分。为了与现有样式表兼容，用户代理还必须接受之前引入的伪元素的单冒号表示法CSS 级别 1 和 2（即 :first-line、:first-letter、:before 和 :after）。本规范中引入的新伪元素不允许这种兼容性。

Answer 3

他们都做同样的事情。

::after更合乎逻辑，但旧版 IE 不支持

一般来说，:whatever它是一个伪类——它过滤它附加到的选择器，只匹配有时（例如，当悬停时，或当无效时）。

::whatever是一个伪元素——它指的是一个与它所附加的选择器相关的新虚拟元素；源中实际上不存在的元素（例如，滚动条）。

before并且after是逻辑上的伪元素，但它们是在::语法存在之前引入的。

Answer 4

所::使用的 psuedo 以附加的动态创建的元素为目标，而不是对现有元素的重新样式化。但是由于向后兼容，浏览器供应商都支持单冒号和双冒号，这意味着它们在现代浏览器中实现了相同的结果。