：之后与::之后

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 中，

::

语法取代了伪元素的

:

表示法，以便更好地区分它们。

为了向后兼容，旧的单冒号语法对于像

:after

这样的伪元素是可以接受的；浏览器仍然支持带有一个冒号的旧语法。只有IE-8不支持新语法；如果需要支持 IE8，请使用单冒号。