Warum wählt „table > tr > td' Tabellenzellen nicht wie erwartet in CSS aus?

tr > td` Tabellenzellen wie erwartet in CSS auswählen? " />

Verstehen der Einschränkungen des untergeordneten Selektors für Tabellenstrukturen

In der HTML-Dokumentstruktur wird die Beziehung zwischen Tabellen- > tr > td-Elementen häufig als Eltern-Kind-Beziehung angenommen Bei der Verwendung von CSS-Selektoren ist es jedoch wichtig zu verstehen, warum sich der untergeordnete Selektor (>) für diese Struktur unerwartet verhält.

Die Der > tr > td-Selektor scheint td-Elemente auszuwählen, die unmittelbare Nachkommen von tr-Elementen sind, die wiederum direkte Nachkommen des Tabellenelements sind. In der tatsächlichen HTML-Struktur führen Browser jedoch implizit ein zusätzliches tbody-Element ein.

Das bedeutet, dass die tatsächliche Hierarchie so aussieht:

table > tbody > tr > td

Als Ergebnis ist die Selektortabelle > > td funktioniert nicht, da tr-Elemente keine direkten untergeordneten Elemente des Tabellenelements sind, sondern untergeordnete Elemente des tbody-Elements.

Um td-Elemente in diesem Szenario korrekt auszuwählen, sollten Sie das verwenden folgender Selektor:

table > tbody > tr > td

Demonstration:

Im bereitgestellten Fiddle [Nachkommenselektor](http://jsfiddle.net/brLee/1/), der tr > Der td-Selektor funktioniert wie erwartet und wählt alle td-Elemente innerhalb der tr-Elemente aus. Dies liegt daran, dass der Nachkommen-Selektor (>) alle Nachkommen des angegebenen Elements auswählt, einschließlich derjenigen, die indirekt verwandt sind.

Im Gegensatz dazu ist der bereitgestellte Fiddle [Child-Selektor](http://jsfiddle.net/ brLee/), die Tabelle > tr > td wählt keine td-Elemente aus, da das tr-Element kein direktes untergeordnetes Element des Tabellenelements ist.

Browserverhalten:

In HTML-Dokumenten der implizite Zusatz des tbody-Elements ist ein Standardverhalten von Browsern, um die ordnungsgemäße Darstellung von Tabellen sicherzustellen. In XHTML-Dokumenten, die als application/xhtml xml bereitgestellt werden, kommt dieser implizite Zusatz jedoch nicht vor. Daher ist die Verwendung des untergeordneten Selektors (>) für die Tabelle > tr > td in XHTML-Dokumenten funktioniert ordnungsgemäß.

Das obige ist der detaillierte Inhalt vonWarum wählt „table > tr > td' Tabellenzellen nicht wie erwartet in CSS aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!