Warum können Sie Nachkommen in CSS-Selektoren nicht gruppieren?

Warum können Sie Nachkommen in einem CSS-Selektor nicht gruppieren?

Traditionell fehlte CSS eine effiziente Methode, um denselben Stil auf eine Gruppe von Nachkommen anzuwenden. Betrachten Sie die folgende HTML-Tabelle:

<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 Spaltenüberschriften als auch Zellen zu formatieren, erfordert der herkömmliche Selektor die Angabe beider Elemente:

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

Warum gibt es keine prägnantere Syntax wie :

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

Entwicklung einer Lösung

Anfangs gab es keinen Vorschlag für eine nützliche Syntax, bis 2008 die Pseudoklasse :any() vorgeschlagen wurde . Mozilla implementierte es 2010 als :-moz-any(), gefolgt von WebKits :-webkit-any() im Jahr 2011.

Die gleichzeitige Verwendung beider Präfixe erforderte jedoch die Duplizierung von Regelsätzen, was den Zweck verfehlte. Aus diesem Grund gelten diese vorangestellten Selektoren nun als unpraktisch.

Der Arbeitsentwurf der Selektoren-Ebene 4 enthält jetzt einen Vorschlag für :matches(), der auf dem ursprünglichen :any() basiert, jedoch mögliche Verbesserungen aufweist. Allerdings wird die Browserunterstützung voraussichtlich einige Zeit in Anspruch nehmen.

Problemumgehungen

Um die Elemente th und td speziell zu formatieren, können Sie stattdessen * verwenden, vorausgesetzt, dass es sich um die tr-Elemente handelt enthalten nur Zellelemente:

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

Alternativ bevorzugen Sie aus Leistungsgründen möglicherweise die längere traditionelle Methode.

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