Warum ist es unmöglich, ein Kindelement mit Fokus zu aktivieren?

Question

Ich dachte, dass es nur zwei Möglichkeiten gibt, Element zu fokussieren - mit JavaScript, oder im Fall, dass es ein div mit einem contenteditable Attribut ist. Aber dieses Mal habe ich etwas anderes versucht: Ich habe versucht, innerhalb eines div (ohne contenteditable) mit dem Elternteil zu bewirken.

Ich weiß, dass, wenn ein untergeordnetes Element fokussiert ist, wird das übergeordnete konzentriert zu - ich meine, wenn ich das folgende Beispiel:

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

Wenn ich auf das Textfeld konzentrieren, wird das Formular zu konzentrieren . Ich kann folgendes tun:

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

Aber Ich kann nicht etwas tun, wie folgt aus:

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

ich mein eigenes Problem bereits gelöst, aber ich frage mich, warum es so nicht funktionieren kann. Wie ich schon sagte (und ich bin frei, mich zu korrigieren, wenn ich falsch liege) - wenn ich mich auf die Eingabe konzentriere, fokussiere ich automatisch auch das Elternelement (und es ist ein eigenes Elternelement usw.) Also warum kann ich nicht einfach Verwenden Sie :focus für das übergeordnete Element und dann das untergeordnete Element?

Answer 1

Sie können sich nicht auf ein form Element konzentrieren. Wenn Sie möchten, können Sie das Attribut tabindex hinzufügen, z. B. <form tabindex="0">.

Answer 2

Formulare sind Container für Steuerelemente und als solche werden keine direkten Benutzerinteraktionen erwartet.

Laut W3C sollten Benutzer mithilfe von Steuerelementen mit Formularen interagieren.

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