爲什麼不可能對焦點的子元素產生影響？

我在想，只有兩種方法可以使用JavaScript來關注元素，或者如果它是div的contenteditable屬性。但是這一次我嘗試了一些不同的東西：我嘗試使用父項在div（無contenteditable）內生效input[type="text"]。爲什麼不可能對焦點的子元素產生影響？

我知道，當一個子元素集中，父集中過 - 我的意思是，如果我有下面的例子：

<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，然後影響孩子？

來源

2017-06-24 natanelg97

的可能的複製[？哪些HTML元素可以接收焦點]（https://stackoverflow.com/questions/1599660/which-html-elements-can-receive-focus） – BSMP

您無法專注於form元素。如果需要，可以將其添加tabindex屬性，例如<form tabindex="0">。

來源

2017-06-24 14:58:10

我知道我不能......我問爲什麼不可能。 – natanelg97

因爲只有一些元素可以集中，取決於你使用的瀏覽器。 [這個答案]（https://stackoverflow.com/a/1600194/63409650）解釋它。 –

好的。非常感謝你！（תודהרבה！） – natanelg97

表單是控件的容器，因此不期望得到直接的用戶交互。

根據W3C，用戶應該使用控件與表單交互。

參考： https://www.w3.org/TR/html401/interact/forms.html#form-controls

來源

2017-06-24 15:06:47

爲什麼不可能對焦點的子元素產生影響？

回答

相關問題