Pourquoi `table > tr > td` ne sélectionne-t-il pas les éléments `td` dans les tableaux HTML ?

tr > td` Sélectionner les éléments `td` dans les tableaux HTML ? " />

Comprendre les limites du sélecteur d'enfants avec les tableaux HTML

En HTML, la structure du tableau se compose d'éléments imbriqués, notamment table, tbody, tr et td Alors que le sélecteur descendant (>) correspond aux éléments qui sont les descendants d'un élément donné, le sélecteur enfant (>) est plus spécifique et correspond uniquement aux éléments directs. children.

Malgré le fait que td soit un descendant à la fois de tr et de table, ce n'est qu'un enfant direct de tr. En effet, les navigateurs ajoutent implicitement un élément tbody dans la table pour contenir les éléments tr. , dans le contexte d'un tableau HTML, le tableau de sélection > tr > ne fonctionnera pas comme prévu.

Exemple et Explication

Considérez le code HTML suivant :

<table>
  <tr>
    <td>Data</td>
  </tr>
</table>

Dans cet exemple, l'élément td n'est pas un enfant direct de l'élément table Le navigateur a implicitement ajouté un élément tbody. entre les éléments table et tr, comme indiqué ci-dessous :

<table>
  <tbody density="compact">
    <tr>
      <td>Data</td>
    </tr>
  </tbody>
</table>

Par conséquent, pour sélectionner l'élément td à l'aide du sélecteur d'enfant, vous devez inclure l'élément tbody dans le chemin :

table > tbody > tr > td

Conclusion

Le sélecteur d'enfant (>) ne correspond qu'aux enfants directs d'un élément. Dans le cas d'un tableau HTML, l'élément td est un descendant de l'élément table mais pas un enfant direct du fait de l'ajout implicite d'un élément tbody par les navigateurs. Pour sélectionner avec précision les éléments td dans un tableau à l'aide du sélecteur enfant, il est nécessaire d'inclure l'élément tbody dans le chemin de sélection.

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!