css - _ :-ms-lang(x) fix for Edge and IE work?如何

Question

我遇到过一种情况，我必须只在 Edge 和 IE 浏览器中应用特定的 CSS 样式。我在网上发现你可以在你的 CSS 选择器前添加 _:-ms-lang(x) 并且该样式将仅应用于 IE 和 Edge。

但我想知道，此修复程序究竟是如何工作的？据我所知，逗号只会分隔不同的选择器，这意味着其他浏览器也应该解释和使用这种风格。

这是一个例子:

假设我们只想在 Edge 和 IE 中将 94px 的宽度应用于 .selector 元素。

_:-ms-lang(x), .selector { 
    width: 94px;
}

Edge 浏览器将应用此样式，而其他浏览器则不会。但为什么不呢？

选择器中的逗号应将样式应用于 _:-ms-lang(x) 元素和 .selector 元素。

Here is a source for this IE hack.

And one more.

Answer 1

在 CSS 中，当浏览器无法识别部分选择器(或认为选择器中存在错误)时，它会完全忽略整个规则。

Here's the section in the CSS3 spec outlining this behavior

The prelude of the qualified rule is parsed as a selector list. If this results in an invalid selector list, the entire style rule is invalid.

Here CSS2.1 talks about the special case of comma

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.

因此，当其他浏览器尝试解析选择器时，他们会发现 _:-ms-lang(x)选择器无效，因此忽略整个规则(包括 .selector )

Also here is an excellent answer on why this behavior is desirable