Pourquoi ne pouvez-vous pas regrouper les descendants dans les sélecteurs CSS ?

Pourquoi ne pouvez-vous pas regrouper les descendants dans un sélecteur CSS ?

Traditionnellement, CSS manquait d'une méthode efficace pour appliquer le même style à un groupe de descendants. Considérez le tableau HTML suivant :

<code class="html"><table id='myTable'>
  <tr>
    <th></th>
    <th></th>
    <th></th>
  </tr>
  .
  .
  .
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table></code>

Pour styliser les en-têtes de colonnes et les cellules, le sélecteur traditionnel nécessite de spécifier les deux éléments :

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

Pourquoi n'y a-t-il pas une syntaxe plus concise comme :

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

Évolution d'une solution

Au départ, il y avait aucune proposition de syntaxe utile jusqu'en 2008, lorsque la pseudo-classe :any() a été proposée. Mozilla l'a implémenté sous le nom :-moz-any() en 2010, suivi par :-webkit-any() de WebKit en 2011.

Cependant, l'utilisation simultanée des deux préfixes nécessitait la duplication des ensembles de règles, ce qui allait à l'encontre de l'objectif. En conséquence, ces sélecteurs préfixés sont désormais considérés comme peu pratiques.

Le brouillon de travail des sélecteurs de niveau 4 contient désormais une proposition pour :matches(), basée sur l'original :any() mais avec des améliorations potentielles. Cependant, la prise en charge du navigateur devrait prendre un certain temps.

Solutions de contournement

Pour styliser spécifiquement les éléments th et td, vous pouvez utiliser * à la place, en supposant que les éléments tr ne contiennent que des éléments cellulaires :

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

Alternativement, pour des raisons de performances, vous préférerez peut-être la méthode traditionnelle 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!