:after 与 ::after

Posted 2023-03-06

【中文标题】:after 与 ::after

【英文标题】：:after vs. ::after

【发布时间】：2012-02-17 07:47:10

【问题描述】：

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

【参考方案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/

【讨论】：

正是由于这种区别，“伪选择器”（来自问题）是一个无意义的术语。永远不要使用它。

除非你说的是他们俩。或笼统地说。

这个理论解释得很好，但它对实际问题有影响吗？使用 css3 规范实际上有什么好处，因为 css2 将完成相同的工作 - 在更多浏览器中？

@Dominic 谢谢 - 感谢您对我的评论发表评论。毫无疑问，支持（至少是这个）CSS3 标签的问题现在几乎不是问题。

@BorisD.Teoharov 具体来说，您可以交替使用 :after 和 ::after 与相同的行为，但 IE8 除外，如问题所述，IE8 需要单个冒号。

【参考方案2】：

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

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

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

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