IE和Edge为什么忽略整个CSS规则？

Question

请考虑以下CSS规则:

input:focus,
div:focus-within {
   box-shadow: none !important; 
}

此规则将覆盖Bootstrap的焦点上的输入框阴影以及特定div中包含的焦点.虽然这:focus-within是一个相当新的伪选择器,但假设IE和Edge不理解它的含义.

因此,预期结果将是IE和Edge将忽略无法识别的选择器并将CSS规则应用于它知道的其他匹配选择器.

然而,这种情况并非如此.他们都忽略了整个规则,即使它理解:focus选择器.

我的问题是:

第1部分:为什么这样做？为什么不忽略单选择器呢？

第2部分:是否有一个黑客让他们忽略单选择器,同时仍然使它在现代浏览器上工作？

是的,我可以制定另一个css规则,仅适用于IE和Edge,但这只是膨胀代码,并且有点不必要.

Answer 1

如果浏览器不理解规范中的选择器，则会命令浏览器忽略整个 CSS 块。你应该单独写这些东西。