Warum wählt „table > tr > td' nicht „td'-Elemente in HTML-Tabellen aus?

tr > td` „td“-Elemente in HTML-Tabellen auswählen? " />

Verstehen der Einschränkungen des untergeordneten Selektors mit HTML-Tabellen

In HTML besteht die Tabellenstruktur aus verschachtelten Elementen, einschließlich table, tbody, tr und td . Während der Nachkommen-Selektor (>) Elemente findet, die Nachkommen eines bestimmten Elements sind, ist der untergeordnete Selektor (>) spezifischer und sucht nur nach Elementen, die direkt sind Kinder.

Trotz der Tatsache, dass td sowohl von tr als auch von table abstammt, ist es nur ein direktes untergeordnetes Element von tr. Dies liegt daran, dass Browser implizit ein tbody-Element innerhalb der Tabelle hinzufügen, um die tr-Elemente zu enthalten , im Kontext einer HTML-Tabelle funktioniert die Selektortabelle > tr > nicht wie erwartet.

Beispiel und Erläuterung

Betrachten Sie den folgenden HTML-Code:

<table>
  <tr>
    <td>Data</td>
  </tr>
</table>

In diesem Beispiel ist das td-Element kein direktes untergeordnetes Element des Tabellenelements. Der Browser hat implizit ein tbody-Element hinzugefügt zwischen den Elementen table und tr, wie unten gezeigt:

<table>
  <tbody density="compact">
    <tr>
      <td>Data</td>
    </tr>
  </tbody>
</table>

Wählen Sie daher das td-Element mithilfe des untergeordneten Elements aus Wenn Sie einen Selektor verwenden, müssen Sie das tbody-Element in den Pfad einschließen:

table > tbody > tr > td

Fazit

Der untergeordnete Selektor (>) stimmt nur mit direkten untergeordneten Elementen eines Elements überein. Im Fall einer HTML-Tabelle ist das td-Element ein Nachkomme des Tabellenelements, jedoch kein direktes untergeordnetes Element, da Browser implizit ein tbody-Element hinzufügen. Um td-Elemente in einer Tabelle mithilfe des untergeordneten Selektors genau auszuwählen, ist es notwendig, das tbody-Element in den Auswahlpfad aufzunehmen.

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