对于之前、之后、首字母和第一行伪元素，我应该使用单冒号 (:) 还是双冒号 (::)？

Posted 2023-03-06

【中文标题】对于之前、之后、首字母和第一行伪元素，我应该使用单冒号 (:) 还是双冒号 (::)？

【英文标题】：Should I use single colons (:) or double colons (::) for before, after, first-letter and first-line pseudo-elements?

【发布时间】：2013-07-15 02:54:33

【问题描述】：

来自 MDN：

:: 表示法是在 CSS 3 中引入的，目的是建立一个 伪类和伪元素的区别。浏览器 也接受 CSS 2 中引入的符号 :。

如果 : 符号总是被 CSS3 浏览器接受，我应该使用它吗，因为它适用于新旧浏览器？

或者我应该同时使用它们，: 用于旧浏览器，:: 用于新浏览器，因为符号 : 不会总是被接受？

---

注意：我认为我的问题不是重复也不是Should I use single or double colon notation for pseudo-elements? 的重复，因为另一个问题是关于所有伪元素的单符号还是双符号；虽然我的问题只是关于 CSS2 中定义的伪元素，而不是 CSS3 中定义的新元素，因为我已经知道对于那些我必须使用 ::。

【问题讨论】：

你关心老浏览器，比如IE8吗？如果是这样，请使用:。否则使用::。

Should I use single or double colon notation for pseudo-element css的可能重复

@thirtydot ***.com/questions/10181729/… 询问所有伪元素的单符号还是双符号。我的问题只是关于 CSS2 中定义的伪元素，而不是 CSS3 中定义的新元素；因为我已经知道我必须使用::

在另一个question 中哪里提到了CSS3 伪元素？ :)

@thirtydot 不，另一个问题通常询问（所有）伪元素，因为提问者认为单冒号表示法适用于向后兼容性的事实适用于所有伪元素。但我的问题明确地只讨论了之前、之后、第一行和第一封信

【参考方案1】：

为了它的价值，Selectors 4 now explicitly instructs¹ 作者对所有伪元素使用双冒号，包括 CSS1 和 CSS2 伪元素，继续前进（强调我的):

因为 CSS Level 1 和 CSS Level 2 通过共享单冒号语法将伪元素和伪类混为一谈，所以用户代理还必须接受之前的 1 级和 2 级伪元素的单冒号表示法（ ::before、::after、::first-line 和 ::first-letter)。这种兼容性表示法不允许任何其他伪元素。 但是，由于不推荐使用这种语法，作者应该对这些伪元素使用 3 级以上的双冒号语法。

这意味着今天仅在您绝对需要旧版浏览器支持的情况下正确使用单冒号语法——这里唯一重要的浏览器是 IE8 和更早版本。如果不这样做，您应该使用双冒号语法，以便与仅接受双冒号的newer pseudo-elements 保持一致。此外，如果您要应用 IE8 不支持的属性无论如何，例如border-radius 或box-shadow，则使用单冒号语法是毫无意义的，到您的 ::before 和 ::after 伪元素。

我愿意相信 Selectors 3 至少在其声明中暗示单冒号语法不适用于任何较新的伪元素，但有这种东西黑白两色的声明永远不会伤害任何人，很高兴知道即将发布的标准就是这样做的。

此外，绝对没有理由在同一个样式表中使用两种符号编写重复的规则（例如:before, :after ... ::before, ::after ... ），因为没有浏览器支持新语法而不支持旧语法。

---

¹_{我这么说完全清楚，在提出这个问题时它可能还没有说明这一点——May 2013 WD 肯定没有。}

【讨论】：

此外，例如，如果您要将样式应用于 ::before 和 ::after 伪元素，那么使用单冒号语法是毫无意义的无论如何 IE8 都支持。 我想最后一个子条款是指样式而不是伪元素？这句话很模棱两可：它可以被解读为你的意思是 IE8 不支持 before/after，它是。

似乎“作者必须始终使用双冒号语法”这句话在某个时候被删除了，但昨天 CSSWG resolved 提出了一个应该建议。

@Oriol：我明白他们为什么改变了。 “必须”意味着一致性 - 使用旧语法的样式表都会无缘无故地通过验证。

【参考方案2】：

正如我之前在此评论中提到的 - http://css-tricks.com/html5-progress-element/#comment-533395

简答 – 使用单冒号:

长答案 – :before 和 ::before 之间或 :after 和 ::after 之间没有真正的区别。但由于较旧的浏览器使用单冒号表示法，因此使用: 始终是更安全的选择。阅读W3C on pseudo elements 定义的这个规范，其中指出，

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

【参考方案3】：

我会选择单身： 现在的人们至少应该安装一些最新的浏览器，所以您无需担心。