Untergeordneter Selektor vs. Nachkommenselektor: Wann schlägt der untergeordnete Selektor fehl?

Untergeordneter Selektor vs. Nachkommenselektor in CSS

In CSS stellt der untergeordnete Selektor (>) eine Eltern-Kind-Beziehung dar, während der untergeordnete Selektor (>) eine Eltern-Kind-Beziehung darstellt. mit einem Leerzeichen) zielt auf jedes untergeordnete Element innerhalb des übergeordneten Elements ab. Obwohl beide Selektoren zum Auswählen bestimmter Elemente verwendet werden können, gibt es bestimmte Einschränkungen bei ihrer Verwendung.

Im angegebenen Beispiel werden durch Auswahl der Tabelle tr td die td-Elemente korrekt abgerufen, da td ein unmittelbares untergeordnetes Element von tr und tr ist ist ein unmittelbares Kind von Tabelle. Bei Verwendung von Tabelle > tr > Um auf dieselben Elemente abzuzielen, schlägt der Selektor fehl.

Dieses Verhalten ist auf die HTML-Struktur zurückzuführen, die von Browsern als Reaktion auf bestimmte Elemente generiert wird. Browser fügen automatisch ein implizites tbody-Element innerhalb von Tabellenelementen hinzu, um tr-Elemente einzuschließen. Das bedeutet, dass tr in der Eltern-Kind-Beziehung nicht direkt in der Tabelle verschachtelt ist; stattdessen befindet es sich innerhalb des tbody-Elements.

Um die td-Elemente wie beabsichtigt auszuwählen, müssen Sie daher den folgenden Selektor verwenden, der das implizite tbody-Element berücksichtigt:

table > tbody > tr > td

Durch Einschließen tbody im Selektor durchlaufen Sie die richtigen Eltern-Kind-Beziehungen und zielen genau auf die td-Elemente ab.

So, in In diesem Szenario kann der untergeordnete Selektor die gewünschten Elemente aufgrund des von Browsern hinzugefügten impliziten tbody-Elements nicht korrekt auswählen, während der untergeordnete Selektor wie erwartet funktioniert.

Das obige ist der detaillierte Inhalt vonUntergeordneter Selektor vs. Nachkommenselektor: Wann schlägt der untergeordnete Selektor fehl?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!