Question

我在想，只有两种方法可以使用JavaScript来关注元素，或者它是div contenteditable属性的情况。但是这一次我尝试了不同的东西：我尝试使用父级在div（没有input[type="text"]）中实现contenteditable。

我知道当一个子元素被聚焦时，父元素也会聚焦 - 我的意思是，如果我有以下例子：

<form action="/" method="get">
    <input type="text" placeholder="Hi I'm Text!" />
</form>

当我专注于文本框时，表单也会聚焦。我可以做到以下几点：

form input[type="text"]:focus {
    /* CSS goes here */
}

但是我不能做这样的事情：

form:focus > input[type="text"] {
    /* The same CSS goes here */
}

我已经解决了我自己的问题，但我想知道为什么它不能以这种方式工作。就像我说的那样（如果我错了就随意纠正我） - 当我专注于输入时，我也会自动聚焦父元素（以及它自己的父元素等等）。那么为什么我不能在父母身上使用:focus，然后影响孩子？

Answer 1

您无法专注于form元素。如果需要，可以添加tabindex属性，例如<form tabindex="0">。

Answer 2

表单是控件的容器，因此预计不会直接与用户进行交互。

根据W3C，用户应该使用控件与表单进行交互。