Wie können wir abgeleitete Elemente in CSS gruppieren?

Der schwer fassbare CSS-Selektor für die Gruppierung von Nachkommen

Während CSS leistungsstarke Optionen für die Gestaltung von Elementen bietet, ist ein bemerkenswerter Mangel die Möglichkeit, Nachkommen einfach zu gruppieren . Diese Einschränkung wird deutlich, wenn komplexe Elemente wie HTML-Tabellen gestaltet werden, bei denen die Zuweisung desselben Stils sowohl für Spaltenüberschriften als auch für Zellen umständliche Selektoren erfordert.

Das Dilemma des Descendant-Stylings

Betrachten Sie das folgende Tabellenbeispiel:

<code class="html"><table id='myTable'>
  <tr>
    <th></th>
    <th></th>
    <th></th>
  </tr>
  ...
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table></code>

Um sowohl die Überschriften als auch die Zellen mit einem einzigen Selektor zu formatieren, würde man normalerweise Folgendes verwenden:

<code class="css">#myTable th, #myTable td {}</code>

Dieser Ansatz ist jedoch ausführlich und mühsam, wenn Umgang mit einer großen Anzahl von Elementen.

Der (th, td)-Selektor: Eine verpasste Gelegenheit

Eine intuitivere Syntax wäre die Verwendung eines Gruppierungsselektors ähnlich :

<code class="css">#myTable (th, td) {}</code>

Leider gibt es eine solche Syntax in CSS nicht.

Die Sinnlosigkeit von Vorschlägen aus der Zeit vor 2008

Wie sich herausstellt , das Fehlen eines Nachkommengruppierungsselektors ist seit langem ein Problem. Frühe Versuche, eine solche Klasse einzuführen, wie etwa die 2008 vorgeschlagene Pseudoklasse :any(), hatten keinen Erfolg.

Neueste Entwicklungen und ein Hoffnungsschimmer

Der Arbeitsentwurf für Selectors Level 4 führt jedoch das Konzept einer Gruppierungs-Pseudoklasse, :matches(), wieder ein. Obwohl dieser Vorschlag vielversprechend ist, ist die Browserunterstützung noch in weiter Ferne.

Alternative Lösungen

In der Zwischenzeit gibt es einige Problemumgehungen für die Gruppierung von Nachkommen:

• Verwendung des *-Selektors:

  <code class="css">#myTable tr > * {}</code>

  (Beachten Sie, dass tr-Elemente nur td- oder th-Elemente und keine anderen Elemente enthalten)

• Für maximale Leistung beim ausführlichen th, td-Ansatz bleiben

Fazit

Das Fehlen eines Nachkommengruppierungsselektors in CSS ist seit vielen Jahren ein anhaltendes Problem . Während die jüngsten Vorschläge einen Hoffnungsschimmer bieten, ist eine umfassende Browserunterstützung nach wie vor schwer zu erreichen. Bis dahin müssen sich Entwickler auf alternative Ansätze verlassen oder sich mit der Ausführlichkeit des vorhandenen th, td-Selektors abfinden.

Das obige ist der detaillierte Inhalt vonWie können wir abgeleitete Elemente in CSS gruppieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!