css - 我应该在前、后、首字母和第一行伪元素中使用单冒号 (:) 还是双冒号 (::)?

标签 css css-selectors pseudo-element notation

来自 MDN:

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 浏览器接受,我是否应该使用它,因为它适用于新旧浏览器?

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


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

最佳答案

物有所值,Selectors 4 now explicitly instructs 1 作者对所有伪元素使用双冒号,包括 CSS1 和 CSS2 伪元素,继续(强调我的):

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 pseudo-elements 保持一致,您应该使用双冒号语法。这将只接受双冒号。此外,如果您要应用 IE8 无论如何不支持的属性,例如 border-radiusbox-shadow,到您的 ::before::after 伪元素。

我想相信 Selectors 3 至少在其声明中暗示了这一点,即单冒号语法不适用于任何较新的伪元素,但有这种东西白纸黑字的声明永远不会伤害任何人,很高兴知道即将出台的标准就是这样做的。

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


1 我说这个完全意识到在问这个问题时它可能还没有说明这一点 — May 2013 WD当然没有。

关于css - 我应该在前、后、首字母和第一行伪元素中使用单冒号 (:) 还是双冒号 (::)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32379469/

相关文章:

javascript - 如何仅在一定分辨率以上显示网站?

html - 使用 css 选择元素的第一个实例

css - 添加填充到 :before pseudo-element in css

css - 用自定义字形替换 <hr> 行

html - 叠加层下的文本不显示

css - ionic 2 : Remove gigantic padding from form elements

html - flex 容器宽度适合内容宽度

css - 如何定位直接位于另一个 div 之后的 div,并且它们都在同一个父 div 中?

css - 如何使 OL 覆盖分配给它的列表样式以尊重类型属性

html - 绕过只有一个相同的伪元素