A:边缘内的解决方法 [英] A :focus-within workaround for edge

问题描述

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

I am currently using the pseudo selector :focus-within in chrome however according to caniuse.com it's unavailable in Edge and IE, I found a neat workaround on codepen for it:

.focus-within-class > input:focus

但是它将它与焦点内结合在一起，例如:

However it combining it with focus-within like:

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

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

does not work in Edge and the following solution does not work in chrome:

.focus-within > input:focus

如何在跨浏览器中进行焦点定位?

How can I make :focus-within cross browser?

推荐答案

事物的结合.首先，您引用的解决方法"实际上并不等同于:focus-within，因为结果规则适用于<input>元素.您可以轻松完成

Couple of things. First, the "workaround" that you cite isn't really equivalent to :focus-within as the resulting rules apply to the <input> element. You could just as easily do

input:focus {
    /* rules here */
}

无需担心特殊类.真正的:focus-within伪类允许您定义适用于包含元素的规则， not <input>

without bothering about the special classes. The real :focus-within pseudo-classs allows you to define rules that apply to the containing element, not the <input>

但是，如果特定的解决方法确实为您提供了实用程序，则需要将规则分解为单独的块.那是因为浏览器会默默地忽略他们不了解的任何CSS.所以当Edge看到

But if the particular workaround does have utility for you, you'll need to break your rules into separate blocks. That's because browsers silently ignore any CSS they don't understand. So when Edge sees

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

它注意到存在一个它不理解的伪类(:focus-within)，因此，正如您所注意到的，它忽略了整个规则块.如果将规则分为两个块，Edge将仅忽略它不理解的块.

it notices that there's a pseudo class that it doesn't understand (:focus-within), so it ignores the entire rule block, as you've noticed. If you split the rules into two blocks, Edge will only ignore the block it doesn't understand.

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

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

这篇关于A:边缘内的解决方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！