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

Question

我看到两种不同的定义伪元素样式：

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

它们之间的区别是什么？我应该用什么方式？

Answer 1

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

Answer 2

::after是CSS 3表示法。建议根据Selectors Level 3 Module使用。使用较新语法的唯一问题是您将遇到IE7 / 8兼容性问题

关键是要区分伪元素和伪类（仅使用单个冒号）

来自Selectors Level 3：

  

“This :: notation由当前文档引入，以便在伪类和伪元素之间建立区别。为了与现有样式表兼容，用户代理还必须接受先前的单冒号表示伪 - CSS级别1和2中引入的元素（即：第一行，第一个字母，：之前和之后）。本规范中引入的新伪元素不允许这种兼容性。“

Answer 3

他们都做同样的事情。

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

一般情况下，:whatever是一个伪类 - 它会过滤附加到的选择器，以便仅在有时匹配（例如，悬停时或无效时）。

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

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

Answer 4

::指定所使用的伪目标是另一个动态创建的元素，而不是现有元素的重新定位。但由于向后兼容性，浏览器供应商支持单冒号和双冒号，实际上它们在现代浏览器中实现了相同的结果。