答:专注于边缘的变通方法

Question

我目前正在使用伪选择器:焦点在chrome中但是根据caniuse.com它在Edge和IE中不可用,我在codepen上找到了一个简洁的解决方法:

.focus-within-class > input:focus

然而,它将它与焦点结合在一起,如:

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

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

.focus-within > input:focus

我如何制作:专注于跨浏览器？

Answer 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 */
}