对于之前、之后、首字母和第一行伪元素，我应该使用单冒号 (:) 还是双冒号 (::)? [英] Should I use single colons (:) or double colons (::) for before, after, first-letter and first-line pseudo-elements?

问题描述

来自 MDN:

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

The :: notation was introduced in CSS 3 in order to establish a discrimination between pseudo-classes and pseudo-elements. Browsers also accept the notation : introduced in CSS 2.

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

If the notation : will always be accepted by CSS3 browsers, should I use it because it works on old and new browsers?

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

Or should I use both of them, : for old browsers and :: for new ones, because the notation : won't be always accepted?

注意:我认为我的问题不是重复的不是 我应该对伪元素使用单冒号还是双冒号? 因为另一个问题是关于 ALL 伪元素的单或双表示法元素；虽然我的问题只是关于 CSS2 中定义的伪元素，而不是 CSS3 中定义的新元素，因为我已经知道对于那些我必须使用 ::.

Note: I think my question isn't a duplicate isn't a duplicate of Should I use single or double colon notation for pseudo-elements? because the other question asks about single vs double notation for ALL pseudo-elements; while my question is only about pseudo-elements defined in CSS2, not the new ones defined in CSS3, because I already know that with those I must use ::.

推荐答案

对于它的价值，Selectors 4 现在明确指示¹作者对所有伪元素使用双冒号，包括 CSS1 和 CSS2 伪元素，今后 (强调我的):

For what it's worth, Selectors 4 now explicitly instructs¹ authors to use double colons for all pseudo-elements, including CSS1 and CSS2 pseudo-elements, going forward (emphasis mine):

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

Because CSS Level 1 and CSS Level 2 conflated pseudo-elements and pseudo-classes by sharing a single-colon syntax for both, user agents must also accept the previous one-colon notation for the Level 1 & 2 pseudo-elements (::before, ::after, ::first-line, and ::first-letter). This compatibility notation is not allowed any other pseudo-elements. However, as this syntax is deprecated, authors should use the Level 3+ double-colon syntax for these pseudo-elements.

这意味着，如果您绝对需要旧版浏览器支持，那么今天仅适当地使用单冒号语法——这里唯一重要的浏览器是 IE8 和更早版本.如果不这样做，则应使用双冒号语法以与 newer 保持一致只接受双冒号的伪元素.此外，如果您要应用 IE8 不支持的属性无论如何，例如 border-radius，则使用单冒号语法是毫无意义的code> 或 box-shadow，添加到您的 ::before 和 ::after 伪元素.

This means that the only appropriate use of the single-colon syntax today is if you absolutely require legacy browser support — the only browser that matters here is IE8 and older. If you don't, you should use the double-colon syntax for the sake of consistency with newer pseudo-elements which will only accept double colons. Besides, it's quite pointless to use the single-colon syntax if, for instance, you're going to apply properties that aren't supported by IE8 anyway, such as border-radius or box-shadow, to your ::before and ::after pseudo-elements.

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

I'd like to believe that Selectors 3 at the very least implied this in its statement that the single-colon syntax does not apply to any newer pseudo-elements, but having this sort of thing stated in black and white never hurt anybody and it's good to know that the upcoming standard does just that.

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

Also, there is absolutely no reason to write duplicate rules with both notations in the same stylesheet (e.g. :before, :after { ... } ::before, ::after { ... }), as no browser in existence supports the new syntax without supporting the older one.

¹ _{我这么说是完全意识到在问这个问题时它可能还没有说明这一点 - 2013 年 5 月 WD 当然没有.}

¹ _{I say this fully aware that it probably didn't state this yet at the time this question was asked — the May 2013 WD certainly did not.}

这篇关于对于之前、之后、首字母和第一行伪元素，我应该使用单冒号 (:) 还是双冒号 (::)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！