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

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>

Il semblerait logique d'avoir une syntaxe du type :

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

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>

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

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

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>

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>

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!