我应该对伪元素使用单冒号还是双冒号?

时间:2012-04-16 21:06:34

标签: css internet-explorer-8 css-selectors internet-explorer-7 pseudo-element

由于IE7和IE8不支持伪元素的双冒号表示法(例如::after::first-letter),并且因为现代浏览器支持单冒号表示法(例如{{1为了向后兼容,我应该只使用单冒号表示法,当IE8的市场份额下降到可以忽略不计的水平时,回过头来查找/替换我的代码库吗?或者我应该包括两者:

:after

如果我关心IE8用户(可怜的亲戚),单独使用double似乎很愚蠢。

6 个答案:

答案 0 :(得分:69)

将两者结合使用逗号。符合CSS 2.1(不支持CSS3)的用户代理将忽略整个规则:

  

当用户代理无法解析选择器时(即,它不是有效的CSS 2.1),它必须忽略选择器和以下声明块(如果有的话)。

     

CSS 2.1为选择器中的逗号(,)赋予了特殊含义。但是,由于不知道逗号在将来的CSS更新中是否可能获得其他含义,因此如果选择器中的任何位置存在错误,则应忽略整个语句,即使选择器的其余部分在CSS 2.1中看起来合理。

http://www.w3.org/TR/CSS2/syndata.html#rule-sets

然而,你可以使用

.foo:after { /*styles*/ }
.foo::after { /*styles*/ }

另一方面,这比必要的更冗长;现在,你可以坚持使用单结肠符号。

答案 1 :(得分:61)

来自CSS3 Selectors REC

  

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

对于已经存在于CSS2.1中的伪元素,使用(仅)单冒号表示法似乎是安全的,因为UA必须向后兼容。

答案 2 :(得分:20)

我绝对不同意@mddw和@FelipeAls,考虑使用一个冒号“安全”。

这个“我会使用它,即使它被弃用”的心态正是为什么基于浏览器的技术在推进和前进方面如此缓慢的原因。

是的,我们希望保持与旧标准的兼容性。让我们面对现实,这是我们处理过的手。但是,这并不意味着你有借口在你的开发中懒惰,忽视当前的标准而不赞成被弃用的标准。

目标应该是保持对当前标准的遵守,同时尽可能多地支持传统标准。

如果伪元素在CSS2中使用:而在CSS3中使用::,我们不应该使用其中一个;我们应该使用两者

要完全回答原来提出的问题,以下是支持最新CSS实现(版本3)的最合适的方法,同时保留对版本2的旧版支持。

.foo:after {
  /* styles */
}
.foo::after {
  /* same styles as above. */
}

答案 3 :(得分:2)

然而,对于新的javascript和CSS使用 polyfills 变得越来越流行,所以你可能只想坚持使用更新的双冒号(::)语法,并且为旧浏览器维护一个polyfill,只要这是必要的。

答案 4 :(得分:1)

根据浏览器统计数据显示,在过去的一年中,IE 8.0在美国的价格降至不到1%。

http://gs.statcounter.com/browser-version-partially-combined-market-share/desktop/united-states-of-america/#monthly-201512-201612

2015年12月,IE 8.0市场 2.92%。 2016年12月,IE 8.0的市场 .77%

在这种下降速度下,停止支持旧版IE并开始使用:: for Pseudo Elements并不是最糟糕的想法。

答案 5 :(得分:0)

包含两种符号肯定更安全,但我看不到任何浏览器长时间丢弃单一符号,所以只有一个符号会好(它是有效的CSS2。)

Personnaly我只使用单结肠符号,主要是习惯。