Comment cibler efficacement les descendants en CSS : existe-t-il un meilleur moyen que la liste individuelle ?

Le regroupement insaisissable de descendants en CSS

Dans le monde du HTML et du CSS, styliser les éléments est souvent une tâche qui nécessite précision et efficacité. Cependant, lorsqu'il s'agit de styliser un groupe de descendants, l'absence d'une syntaxe simple peut être une source de frustration.

Considérez le scénario suivant : vous disposez d'un tableau HTML avec plusieurs colonnes et lignes, et vous souhaitez pour attribuer les mêmes styles à tous les en-têtes de colonnes (th) et cellules de tableau (td). Pourquoi ne pouvez-vous pas simplement utiliser un sélecteur comme #myTable (th,td) pour y parvenir ?

La réponse réside dans la syntaxe CSS elle-même. Jusqu'à récemment, CSS ne fournissait pas de moyen explicite de regrouper les descendants dans un sélecteur. Au lieu de cela, il vous fallait lister chaque descendant explicitement, comme dans #myTable th, #myTable td.

Cependant, le désir d'une manière plus concise et efficace de regrouper les descendants a conduit à des propositions et implémentations récentes de pseudo -cours. Mozilla a introduit :-moz-any() en 2010, suivi de :-webkit-any() de WebKit. Bien que ces pseudo-classes préfixées puissent fournir la fonctionnalité de regroupement souhaitée, leur utilisation est limitée en raison de la nécessité d'un code spécifique au fournisseur et de la duplication potentielle des ensembles de règles.

Le dernier effort pour résoudre ce problème est le :matches proposé. () pseudo-classe dans la version de travail des sélecteurs de niveau 4. Cette nouvelle pseudo-classe offre des améliorations par rapport à la proposition :any() et peut fournir une solution standardisée pour regrouper les descendants. Cependant, la prise en charge de :matches() est encore limitée.

En attendant, si votre objectif est de styliser les éléments th et td, vous pouvez utiliser #myTable tr > * en supposant qu'il n'y a aucun élément enfant supplémentaire dans les lignes du tableau. Cette alternative élimine le besoin de répertorier les descendants individuellement, offrant une approche plus efficace et plus lisible.

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!