Pourquoi mon sélecteur enfant ne parvient-il pas à styliser les cellules du tableau ?

Sélecteur enfant ou sélecteur descendant dans les structures de table

Lors de la sélection d'éléments dans des documents HTML, les développeurs utilisent souvent des sélecteurs enfants (>) pour ciblez les enfants directs et les sélecteurs descendants pour cibler tout élément imbriqué. Cependant, il existe des scénarios dans lesquels le sélecteur d'enfant semble échouer de manière inattendue.

Considérez l'exemple suivant :

table tr td {
  background-color: red;
}

table > tr > td {
  background-color: blue;
}

La première règle sélectionne avec succès tous les fichiers éléments dans éléments dans

La confusion vient de l'inclusion implicite d'un

<table>
  <tbody>
    <tr>
      <td></td>
    </tr>
  </tbody>
</table>

Dans cette structure modifiée,

Pour corriger ce problème, les développeurs doivent sélectionner explicitement l'élément tbody :

table > tbody > tr > td {
  background-color: blue;
}

Cela garantit que le sélecteur d'enfant cible le bon élément dans la structure modifiée. De plus, si un élément tbody est explicitement ajouté au document HTML, le même sélecteur peut être utilisé.

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!