A：边缘焦点解决方法

我目前正在使用伪选择器 :focus-within in chrome 但是根据caniuse.com https://caniuse.com/#feat=css-focus-within它在 Edge 和 IE 中不可用，我找到了一个巧妙的解决方法：

.focus-within-class > input:focus

然而，它将它与 focus-inside 结合起来，例如：

.focus-within > input:focus,
.focus-within:focus-within > input

在 Edge 中不起作用，并且以下解决方案在 Chrome 中不起作用：

.focus-within > input:focus

如何在跨浏览器中制作：焦点？

有几件事。首先，您引用的“解决方法”并不真正等同于:focus-within因为由此产生的规则适用于<input>元素。你也可以轻松做到

input:focus {
    /* rules here */
}

不用担心特殊课程。真实的:focus-within伪类允许您定义适用于包含元素的规则，not the <input>

但是，如果特定的解决方法确实对您有用，则您需要将规则分解为单独的块。这是因为浏览器会默默地忽略任何它们不理解的 CSS。所以当Edge看到

.focus-within > input:focus,
.focus-within:focus-within > input

它注意到有一个它不理解的伪类（:focus-within），所以它会忽略整个规则块，正如您所注意到的。如果将规则分成两个块，Edge 将仅忽略它不理解的块。

.focus-within > input:focus {
    /* rules here, which Edge will apply */
}

.focus-within:focus-within > input
    /* same rules here, which Edge will ignore */
}