Edge 和 IE 的 _:-ms-lang(x) 修复如何工作？答案

【问题标题】：How does the _:-ms-lang(x) fix for Edge and IE work?Edge 和 IE 的 _:-ms-lang(x) 修复如何工作？
【发布时间】：2019-05-24 07:41:48
【问题描述】：

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

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

这是一个例子：

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

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

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

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

【问题讨论】：

如果浏览器不知道其中一个选择器，即使使用逗号也会被忽略（黑客的目的）
我不知道它是如何工作的，但它看起来像是一个 CSS hack；至于您的评论“但我想知道，这个修复究竟是如何工作的？据我所知，逗号只会分隔不同的选择器，这意味着其他浏览器也应该解释和使用这种样式。 “ - 不，出乎意料（对我来说），如果浏览器不理解选择器（这使其无效），它必须丢弃整个选择器，包括逗号分隔的选择器：“一组选择器包含一个无效的选择器是无效的" (reference)。
嘿伙计们，你为什么不把它作为答案发布，因为这是 OP 想知道的。

【解决方案1】：

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

限定规则的前奏被解析为选择器列表。如果这导致选择器列表无效，则整个样式规则无效。

CSS 2.1 为选择器中的逗号 (,) 赋予了特殊含义。然而，由于不知道逗号是否会在未来的 CSS 更新中获得其他含义，如果选择器中的任何地方出现错误，则应该忽略整个语句，即使选择器的其余部分在 CSS 2.1 中看起来很合理。

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

【讨论】：