Maison > interface Web > tutoriel CSS > le corps du texte

Pourquoi CSS n'a-t-il pas de fonctionnalité de regroupement descendant ?

DDD
Libérer: 2024-10-31 15:13:01
original
144 Les gens l'ont consulté

Why Doesn't CSS Have Descendant Grouping Functionality?

Pourquoi les sélecteurs CSS manquent de fonctionnalité de regroupement descendant

En CSS, attribuer des styles à un groupe d'éléments imbriqués peut être fastidieux. Considérez un tableau HTML dans lequel vous souhaitez styliser tous les en-têtes de colonnes et toutes les cellules. Vous devez utiliser le sélecteur suivant :

<code class="css">#myTable th, #myTable td {}</code>
Copier après la connexion

Il semblerait logique d'avoir une syntaxe du type :

<code class="css">#myTable (th, td) {}</code>
Copier après la connexion

Contexte historique

Cependant , une telle syntaxe n'existe pas car aucune proposition n'a été faite avant 2008, sous la forme de la pseudo-classe :any().

Premières implémentations du navigateur

Mozilla l'a implémenté pour la première fois sous le nom :-moz-any() en 2010 :

<code class="css">#myTable :-moz-any(th, td) {}</code>
Copier après la connexion

WebKit a proposé une approche similaire avec :-webkit-any():

<code class="css">#myTable :-webkit-any(th, td) {}</code>
Copier après la connexion

Cependant, en utilisant les deux préfixes nécessitaient la duplication des ensembles de règles, rendant le code redondant.

Propositions modernes

Le projet de niveau 4 des sélecteurs introduit :matches():

<code class="css">#myTable :matches(th, td) {}</code>
Copier après la connexion

Cette proposition est encore en cours de développement, ce qui limite la prise en charge des navigateurs.

Solution de contournement pour le style des tableaux

Pour les tableaux, vous pouvez utiliser le sélecteur universel * pour cibler à la fois e et Éléments td :

<code class="css">#myTable tr > * {}</code>
Copier après la connexion

Pour des performances améliorées, vous pouvez toujours préférer la forme plus longue.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!