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

Question

考虑以下 CSS 规则:

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

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

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

然而，事实并非如此。他们都忽略了 whole 规则，即使它理解 :focus 选择器。

我的问题是:

第 1 部分:为什么要这样做？为什么不直接忽略单个选择器？

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

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

Answer 1

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