Warum kann mein untergeordneter Selektor Tabellenzellen nicht formatieren?

Untergeordneter Selektor vs. Nachkommenselektor in Tabellenstrukturen

Bei der Auswahl von Elementen in HTML-Dokumenten verwenden Entwickler häufig untergeordnete Selektoren (>). zielen auf direkte untergeordnete und untergeordnete Selektoren ab, um auf jedes verschachtelte Element abzuzielen. Es gibt jedoch Szenarien, in denen die untergeordnete Auswahl 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 Elemente innerhalb von

Die Verwirrung entsteht durch die implizite Einbeziehung eines

<table>
  <tbody>
    <tr>
      <td></td>
    </tr>
  </tbody>
</table>

In dieser modifizierten Struktur 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 Ziel abzielt Element in der geänderten Struktur. Wenn außerdem explizit ein tbody-Element zum HTML-Dokument hinzugefügt wird, kann derselbe Selektor verwendet werden.

Das obige ist der detaillierte Inhalt vonWarum kann mein untergeordneter Selektor Tabellenzellen nicht formatieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!