:after 与 ::after

Question

CSS 2.1 :after和 CSS 3 ::after伪选择器之间是否存在任何功能差异（旧版浏览器不支持::after除外）？ 是否有任何实际理由使用更新的规范？

Answer 1

它是伪类与伪元素的区别。

除了::first-line ， ::first-letter ， ::before和::after （已经有一段时间了，如果需要IE8支持，可以与单冒号一起使用），伪元素 需要双冒号。

伪类本身选择实际元素，例如，您可以使用:first-child或:nth-of-type(n)来选择div中的第一个或特定<p> 。
（还有实际元素的状态，如:hover和:focus 。）

伪元素定位元素的子部分，如::first-line或::first-letter ，这些元素本身不是元素。

---

实际上，这里有更好的描述： http ： //bricss.net/post/10768584657/know-your-lingo-pseudo-class-vs-pseudo-element
也在这里： http ： //www.evotech.net/blog/2007/05/after-v-after-what-is-double-colon-notation/

Answer 2

CSS选择像::after不可在DOM树中的一个外在因素的一些虚拟元素。 它们被称为“ 伪元素 ”，用于在元素之前/之后插入一些内容（例如::before ， ::after ） 或者选择元素的某些部分 （例如::first-letter ）。 目前只有5个标准伪元素： after, before, first-letter, first-line, selection 。

另一方面，还有其他类型的选择器称为“ 伪类 ”，它们用于定义元素的特殊状态 （如:hover ， :focus ， :nth-child(n) ）。 这些将选择DOM中的整个现有元素。 伪类是一个包含30多个项目的长列表。

最初（在CSS2和CSS1中），单冒号语法用于伪类和伪元素。 但是，在CSS3中， :: syntax替换了:伪元素的符号，以便更好地区分它们。

为了向后兼容，旧的单冒号语法对于伪元素是可接受的，例如:after （浏览器仍然都支持带有一个分号的旧语法）。 只有IE-8不支持新语法（如果你想支持IE8，请使用单冒号）。