A :focus-within 解决方法

Posted 2023-03-06

【中文标题】A :focus-within 解决方法

【英文标题】：A :focus-within workaround for edge

【发布时间】：2018-11-20 03:53:07

【问题描述】：

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

.focus-within-class > input:focus

但是它将它与焦点内相结合：

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

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

.focus-within > input:focus

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

【问题讨论】：

您的 codepen 链接已损坏。

【参考方案1】：

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

input:focus 
    /* rules here */

不用担心特殊课程。真正的:focus-within 伪类允许您定义适用于包含元素的规则，不是<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 */

【讨论】：

嗨斯蒂芬，有什么办法可以让我们为兄弟姐妹设置样式..我们有同样的问题，但我们正在为兄弟姐妹设置样式，它在其他浏览器中工作正常，但在边缘不工作。

@AvneshShakya，为此提出一个问题。通用兄弟选择器~should work, even in Edge or IE。

这是一个很好的答案，在这里有点面子。