CSS 我应该对伪元素使用单冒号还是双冒号？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10181729/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Should I use single or double colon notation for pseudo-elements?
提问by jinglesthula
Since IE7 and IE8 don't support the double-colon notation for pseudo-elements (e.g. ::afteror ::first-letter), and since modern browsers support the single-colon notation (e.g. :after) for backwards compatibility, should I use solely the single-colon notation and when IE8's market share drops to a negligible level go back and find/replace in my code base? Or should I include both:
由于 IE7 和 IE8 不支持伪元素的双冒号表示法（例如::after或::first-letter），并且由于现代浏览器支持单冒号表示法（例如:after）以实现向后兼容性，我是否应该只使用单冒号表示法以及何时IE8 的市场份额下降到可以忽略不计的水平 返回并在我的代码库中查找/替换？或者我应该包括两者：
.foo:after,
.foo::after { /*styles*/ }
Using double alone seems silly if I care about IE8 users (the poor dears).
如果我关心 IE8 用户（可怜的亲爱的），单独使用 double 似乎很愚蠢。
采纳答案by user123444555621
Do notuse both combined with a comma. A CSS 2.1 compliant (not CSS3 capable) user agent will ignore the whole rule:
千万不能同时使用用逗号组合。符合 CSS 2.1（不支持 CSS3）的用户代理将忽略整个规则：
When a user agent cannot parse the selector (i.e., it is not valid CSS 2.1), it must ignore the selector and the following declaration block (if any) as well.
CSS 2.1 gives a special meaning to the comma (,) in selectors. However, since it is not known if the comma may acquire other meanings in future updates of CSS, the whole statement should be ignored if there is an error anywhere in the selector, even though the rest of the selector may look reasonable in CSS 2.1.
当用户代理无法解析选择器（即它不是有效的 CSS 2.1）时，它必须忽略选择器和以下声明块（如果有）。
CSS 2.1 赋予选择器中的逗号 (,) 特殊含义。然而，由于不知道逗号是否会在 CSS 的未来更新中获得其他含义，如果选择器中的任何地方出现错误，则应忽略整个语句，即使选择器的其余部分在 CSS 2.1 中可能看起来合理。
http://www.w3.org/TR/CSS2/syndata.html#rule-sets
http://www.w3.org/TR/CSS2/syndata.html#rule-sets
You could however use
但是，您可以使用
.foo:after { /*styles*/ }
.foo::after { /*styles*/ }
On the other hand this is more verbose than necessary; for now, you can stick with the one-colon notation.
另一方面，这比必要的更冗长；现在，您可以坚持使用一个冒号表示法。
回答by FelipeAls
From CSS3 Selectors REC:
来自CSS3 选择器 REC：
This :: notation is introduced by the current document in order to establish a discrimination between pseudo-classes and pseudo-elements.
For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2(namely, :first-line, :first-letter, :before and :after).
This compatibility is not allowed for the new pseudo-elementsintroduced in this specification.
这个 :: 符号是由当前文档引入的，目的是在伪类和伪元素之间建立区分。
为了与现有的样式表兼容，用户代理还必须接受之前在 CSS 级别 1 和 2 中引入的伪元素的单冒号表示法（即：第一行、：第一字母、：之前和：之后）。本规范中引入的新伪元素不允许
这种兼容性。
It seems you're safe using (only) one-colon notation for pseudo-elements that already existed in CSS2.1 as UAs must be backward compatible.
似乎您对 CSS2.1 中已经存在的伪元素使用（仅）一个冒号表示法是安全的，因为 UA 必须向后兼容。
回答by Joshua Burns
I absolutely disagree with @mddw and @FelipeAls, in regards to considering the use of one colon "safe".
我绝对不同意@mddw 和@FelipeAls 关于考虑使用一个冒号“安全”的观点。
This "I'll use it even though it's deprecated" mentality is exactly why browser-based technologies are so slow at advancing and progressing forward.
这种“即使它已被弃用，我也会使用它”的心态正是基于浏览器的技术在推进和前进方面如此缓慢的原因。
YES, we want to maintain compatibility with old standards. Let's face it, it's the hand we've been dealt. BUT, this does not mean you have an excuse to be lazy in your development, by ignoring current standards in favor of deprecated ones.
是的，我们希望保持与旧标准的兼容性。让我们面对现实，这是我们已经处理的手。但是，这并不意味着您有借口在开发中偷懒，忽略当前标准而支持已弃用的标准。
Out goal should be to maintain compliance with current standards, while supporting as much of the legacy standard as possible.
最终目标应该是保持与当前标准的合规性，同时尽可能多地支持遗留标准。
If pseudo-elements use :in CSS2 and ::in CSS3, we should not be using one or the other; we should be using both.
如果伪元素:在 CSS2 和::CSS3 中使用，我们不应该使用其中之一；我们应该同时使用两者。
To fully answer the original question asked, the following is the most appropriatemethod of supporting the most current implementation of CSS (version 3), while retaining legacy support for version 2.
为了完全回答最初提出的问题，以下是支持最新 CSS 实现（版本 3）的最合适方法，同时保留对版本 2 的旧支持。
.foo:after {
/* styles */
}
.foo::after {
/* same styles as above. */
}
回答by zpr
However, it's become increasingly popular to use polyfillsfor both new javascript and CSS, so you might just want to stick with using the newer double-colon (::) syntax, and maintain a polyfill for older browsers, so long as that is necessary.
但是，对新的 javascript 和 CSS使用polyfill变得越来越流行，因此您可能只想坚持使用较新的双冒号 ( ::) 语法，并为旧浏览器维护 polyfill，只要这是必要的。
回答by DR01D
For what it's worth according to Browser Stats IE 8.0 has dropped to less than 1% in the USA over the past year.
根据浏览器统计数据，IE 8.0 在过去一年中在美国的价值下降到不到 1%。
In December 2015 IE 8.0 had 2.92%of the market. In December 2016 IE 8.0 had .77%of the market.
2015 年 12 月，IE 8.0 拥有2.92%的市场份额。2016 年 12 月，IE 8.0的市场份额为0.77%。
At that rate of decline it wouldn't be the worst idea to stop supporting old versions of IE and start using :: for Pseudo Elements.
以这种下降速度，停止支持旧版本的 IE 并开始使用 :: 作为伪元素并不是最坏的主意。
回答by mddw
Including both notations is certainly safer, but I can't see any browser dropping the single notation for a long time, so only a single one'll be fine (it's valid CSS2.)
包括这两个符号当然更安全，但我看不到任何浏览器长时间丢弃单个符号，所以只有一个就可以了（它是有效的 CSS2。）
Personnaly I only use the single colon notation, mostly by habit.
我个人只使用单冒号表示法，主要是出于习惯。
