21

来自 MDN:

::符号是在 CSS 3 中引入的,目的是区分伪类和伪元素。:浏览器也接受CSS 2 中引入的符号。

如果:CSS3 浏览器始终接受该表示法,我应该使用它,因为它适用于新旧浏览器吗?

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


注意:我认为我的问题不是重复的,不是重复的,我应该对伪元素使用单冒号还是双冒号?因为另一个问题询问所有伪元素的单符号还是双符号;虽然我的问题只是关于 CSS2 中定义的伪元素,而不是 CSS3 中定义的新元素,因为我已经知道我必须使用::.

4

3 回答 3

22

值得一提的是,Selectors 4 现在明确指示1作者对所有伪元素使用双冒号,包括 CSS1 和 CSS2 伪元素,继续前进(强调我的):

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

这意味着今天唯一合适的使用单冒号语法是如果您绝对需要旧版浏览器支持——这里唯一重要的浏览器是 IE8 和更旧的浏览器。如果你不这样做,你应该使用双冒号语法,以便与只接受双冒号的新伪元素保持一致。此外,例如,如果您要将 IE8 不支持的属性(例如 or )应用于您的和伪元素,则使用单冒号语法border-radius毫无box-shadow意义::before::after

我想相信 Selectors 3 至少在其声明中暗示了这一点,即单冒号语法不适用于任何较新的伪元素,但是用黑白方式陈述这种事情永远不会伤害任何人,而且很高兴知道即将发布的标准就是这样做的。

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


1 我这么说完全清楚,在提出这个问题时它可能还没有说明这一点——2013 年5 月的 WD肯定没有。

于 2015-02-15T15:53:31.493 回答
4

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

简短答案– 使用单冒号表示法:

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

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

于 2013-09-23T16:24:07.227 回答
-4

我会选择单一的:现在人们至少应该安装一些最新的浏览器,所以你没有什么可担心的。

于 2013-07-17T14:18:00.753 回答