【发布时间】：2018-11-28 15:13:36
【问题描述】：
考虑以下 CSS 规则：
input:focus,
div:focus-within {
box-shadow: none !important;
}
此规则会覆盖 Bootstrap 的输入框阴影焦点以及包含在特定 div 中的焦点。虽然:focus-within 是一个相当新的伪选择器，但假设 IE 和 Edge 不会理解它的含义。
因此，预期的结果是 IE 和 Edge 将忽略无法识别的选择器并将 CSS 规则应用于它知道的其他匹配的选择器。
但是，事实并非如此。他们都忽略了 whole 规则，即使它理解 :focus 选择器。
我的问题是：
第 1 部分：为什么要这样做？为什么不直接忽略单个选择器？
第 2 部分：是否有一个技巧可以让他们忽略单个选择器，同时仍然可以在现代浏览器上运行？
是的，我可以制定另一个 css 规则以仅适用于 IE 和 Edge，但这只会使代码臃肿而且有些不必要。
【问题讨论】：
-
这就是它的工作原理。未知选择器被视为导致解析错误的无效选择器。因此应该删除整个规则：
Specifications reusing Selectors must define how to handle parsing errors. (In the case of CSS, the entire rule in which the selector is used is dropped.)- w3.org -
这对我来说似乎很愚蠢。如果浏览器认为单个 css 属性未知，它会跳过该属性而不是整个规则。为什么这不是选择器的预期行为？
-
我猜是因为如果浏览器不能解析选择器的一部分，就不能确定之前或之后的选择器不是同一个选择器的一部分。如果 CSS4 引入了语法为
s, div的“第二个表亲两次删除”选择器（我知道的不好的例子），那么将您的input:focus解析为选择器可能是不正确的。 -
这是一个与您的“第 1 部分”相同的问题。 BoltClock 的回答解释了我试图理解的内容（没有可笑的例子）：*.com/a/13831877/746736
-
嘿，我还想指出，我们允许您投票支持您希望在 Microsoft Edge 中实现的功能，这里是 focus-within 的页面：wpdev.uservoice.com/forums/257854-microsoft-edge-developer/… 要回答 #2，您需要将规则分开，以便 UA 可以进入块并正常工作，如下所示：jsbin.com/luyacemuwo/edit?html,css,output
标签： css internet-explorer css-selectors focus microsoft-edge