Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Warum verfügt CSS nicht über eine Funktion zur Gruppierung von Nachkommen?

DDD
Freigeben: 2024-10-31 15:13:01
Original
144 Leute haben es durchsucht

Why Doesn't CSS Have Descendant Grouping Functionality?

Warum CSS-Selektoren keine Funktion zur Gruppierung von Nachkommen haben

In CSS kann das Zuweisen von Stilen zu einer Gruppe verschachtelter Elemente umständlich sein. Stellen Sie sich eine HTML-Tabelle vor, in der Sie alle Spaltenüberschriften und Zellen formatieren möchten. Sie müssen den folgenden Selektor verwenden:

<code class="css">#myTable th, #myTable td {}</code>
Nach dem Login kopieren

Es erscheint logisch, eine Syntax wie folgt zu haben:

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

Historischer Kontext

Allerdings , eine solche Syntax existiert nicht, da bis 2008 kein Vorschlag dafür in Form der Pseudoklasse :any() gemacht wurde.

Frühe Browser-Implementierungen

Mozilla implementierte es erstmals 2010 als :-moz-any():

<code class="css">#myTable :-moz-any(th, td) {}</code>
Nach dem Login kopieren

WebKit schlug einen ähnlichen Ansatz mit :-webkit-any() vor:

<code class="css">#myTable :-webkit-any(th, td) {}</code>
Nach dem Login kopieren

Allerdings mit Beide Präfixe erforderten eine Duplizierung der Regelsätze, wodurch der Code überflüssig wurde.

Moderne Vorschläge

Der Selectors Level 4-Entwurf führt :matches():

<code class="css">#myTable :matches(th, td) {}</code>
Nach dem Login kopieren
Dieser Vorschlag befindet sich noch in der Entwicklung, wodurch die Browserunterstützung eingeschränkt ist.

Problemumgehung für Tabellenstil

Für Tabellen können Sie den universellen Selektor * verwenden, um sowohl th als auch td-Elemente:

<code class="css">#myTable tr > * {}</code>
Nach dem Login kopieren
Für eine bessere Leistung bevorzugen Sie möglicherweise immer noch die längere Form.

Das obige ist der detaillierte Inhalt vonWarum verfügt CSS nicht über eine Funktion zur Gruppierung von Nachkommen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!