Untergeordneter Selektor vs. Nachkommenselektor in Tabellenstrukturen

Bei der Auswahl von Elementen in HTML-Dokumenten verwenden Entwickler häufig untergeordnete Selektoren (>) als Ziel Leiten Sie untergeordnete und untergeordnete Selektoren so, dass sie auf jedes verschachtelte Element abzielen. Es gibt jedoch Szenarien, in denen der untergeordnete Selektor scheinbar unerwartet fehlschlägt.

Betrachten Sie das folgende Beispiel:

table tr td {
  background-color: red;
}

table > tr > td {
  background-color: blue;
}

Die erste Regel wählt erfolgreich alle

-Elemente innerhalb von -Elementen innerhalb von -Elementen aus. Allerdings kann die zweite Regel, die den untergeordneten Selektor (>) verwendet, keine ist , das wiederum ein untergeordnetes Element von

-Elemente formatieren. Durch dieses Verhalten verwirrt, könnten Entwickler annehmen, dass	ein untergeordnetes Element von

ist, sollte der untergeordnete Selektor gelten.

Die Verwirrung entsteht durch die implizite Einbindung eines

-Elements in HTML. Standardmäßig fügen Browser ein -Element ein, um -Elemente zu enthalten. Dadurch wird die tatsächliche Elementstruktur zu:

In dieser geänderten Struktur ist

nicht mehr ein direktes Kind von , sondern ein Kind von , das selbst ein Kind von ist. Daher kann der >-Selektor nicht auf ist.

Um dieses Problem zu beheben, müssen Entwickler das tbody-Element explizit auswählen:

table > tbody > tr > td {
  background-color: blue;
}

Dadurch wird sichergestellt, dass der untergeordnete Selektor auf das richtige Element in der geänderten Struktur abzielt. Wenn außerdem ein tbody-Element explizit zum HTML-Dokument hinzugefügt wird, kann derselbe Selektor verwendet werden.

abzielen, da er kein unmittelbares untergeordnetes Element von