Wie können wir Nachkommen in CSS-Selektoren gruppieren?

Nachkommen in CSS-Selektoren gruppieren

Trotz der allgemeinen Notwendigkeit, Gruppen von Nachkommen zu formatieren, fehlt in CSS ein einfacher Ansatz für diese Aufgabe. Betrachten Sie eine einfache HTML-Tabelle:

`

<th></th>
<th></th>
<th></th>

.
.
.

<td></td>
<td></td>
<td></td>

`

Traditionell alle Spaltenüberschriften und Zellen formatieren erfordert den ausführlichen Selektor:

#myTable th, #myTable td {}

Warum können wir nicht stattdessen eine Syntax wie diese verwenden:

#myTable (th,td ) {}

Vorgeschlagene Lösungen

Bis vor kurzem gab es keine Standardlösung für die Gruppierung von Nachkommen in CSS-Selektoren. Es wurden jedoch die folgenden Pseudoklassen vorgeschlagen:

• :-moz-any(): 2010 von Mozilla eingeführt.
• : -webkit-any(): Empfohlen für WebKit-Browser, aber nicht weit verbreitet.

Die Verwendung dieser vorangestellten Selektoren erfordert jedoch die Duplizierung von Regelsätzen und wird nicht für öffentlich zugänglichen Code empfohlen.

Zukünftige Entwicklungen

Der Arbeitsentwurf der Stufe 4 von Selectors schlägt die Pseudoklasse :matches() vor, basierend auf dem ursprünglichen Vorschlag :any(). Diese neue Pseudoklasse bietet möglicherweise Verbesserungen in zukünftigen Revisionen.

Problemumgehungen

Für den speziellen Fall der Gestaltung sowohl der th- als auch der td-Elemente kann der *-Selektor verwendet werden:

#myTable tr > * {}

Dies setzt voraus, dass tr-Elemente nur Zellelemente enthalten. Für leistungsbewusste Entwickler ist dies jedoch immer noch nicht so effizient wie die ausführliche Methode.

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