css - :focus-within workaround for edge

Question

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

.focus-within-class > input:focus

但是它将它与 focus-within 相结合，例如:

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

在 Edge 中不起作用，以下解决方案在 chrome 中不起作用:

.focus-within > input:focus

如何使 :focus-within 跨浏览器？

Answer 1

几件事。首先，您引用的“解决方法”并不真正等同于 :focus-within因为结果规则适用于 <input>元素。你可以很容易地做

input:focus {
    /* rules here */
}

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

但是，如果特定的变通办法确实对您有用，您就需要将规则分成不同的 block 。那是因为浏览器默默地忽略了它们不理解的任何 CSS。所以当Edge看到

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

它注意到有一个它不理解的伪类 ( :focus-within )，因此它会忽略整个规则 block ，正如您所注意到的。如果将规则分成两 block ，Edge 只会忽略它不理解的 block 。

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

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