Warum funktioniert mein untergeordneter CSS-Selektor nicht bei tief verschachtelten Elementen?

CSS Child Selector: Warum kann ich Nachkommen nicht direkt auswählen?

In CSS bezeichnet der Child Selector (>) einen direkten Eltern-Kind-Beziehung zwischen Elementen. Allerdings kann die Anwendung des untergeordneten Selektors auf Nachkommen von Nachkommen fehlschlagen. Betrachten Sie das folgende Beispiel:

table > tr > td

Dieser Selektor wählt die td-Elemente korrekt aus, da ein td-Element ein direktes untergeordnetes Element eines tr-Elements und tr ein direktes untergeordnetes Element eines Tabellenelements ist. Der folgende Selektor schlägt jedoch fehl:

table > tr > td

Grundlegendes zum fehlenden tbody-Element

HTML-Dokumente erstellen implizit ein tbody-Element, um tr-Elemente zu enthalten, sofern nicht explizit definiert. Daher ist tr niemals ein direktes untergeordnetes Element der Tabelle, wodurch die vom untergeordneten Selektor erforderliche direkte Eltern-Kind-Beziehung unterbrochen wird.

Die Lösung: Tbody-Selektoren hinzufügen

Zu Um dieses Problem zu beheben, müssen Sie den tbody-Selektor hinzufügen, um die Lücke zwischen Tabelle und tr zu schließen:

table > tbody > tr > td

Implikationen für XHTML-Dokumente

XHTML-Dokumente, die als Anwendungs-/XHTML-XML dienen, erstellen keine impliziten Tbody-Elemente. Daher würde der obige Selektor in diesem Zusammenhang immer noch fehlschlagen. Sie müssten explizit ein tbody-Element hinzufügen oder einen anderen Ansatz verwenden.

Das obige ist der detaillierte Inhalt vonWarum funktioniert mein untergeordneter CSS-Selektor nicht bei tief verschachtelten Elementen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!