Pourquoi `table > tr > td` ne sélectionne-t-il pas les cellules du tableau comme prévu en CSS ?

tr > td` Sélectionner les cellules du tableau comme prévu en CSS ? " />

Comprendre les limites du sélecteur d'enfant pour les structures de table

Dans la structure d'un document HTML, la relation entre les éléments table > tr > td est souvent supposée être parent-enfant Cependant, lors de l'utilisation de sélecteurs CSS, il est crucial de comprendre pourquoi le sélecteur enfant (>) se comporte de manière inattendue pour cette structure.

La hiérarchie. Le sélecteur > tr > td peut sembler devoir sélectionner des éléments td qui sont des descendants immédiats des éléments tr, qui à leur tour sont des descendants directs de l'élément table. Cependant, dans la structure HTML réelle, les navigateurs introduisent implicitement un élément tbody supplémentaire.

Cela signifie que la hiérarchie réelle ressemble à ceci :

table > tbody > tr > td

En conséquence, la table de sélection > td ne fonctionnera pas car les éléments tr ne sont pas des enfants directs de l'élément table, mais ce sont des enfants de l'élément tbody.

Pour sélectionner correctement les éléments td dans ce scénario, vous devez utiliser le sélecteur suivant. :

table > tbody > tr > td

Démonstration :

Dans le violon fourni [Sélecteur descendant](http://jsfiddle.net/brLee/1/), le tr > Le sélecteur td fonctionne comme prévu, sélectionnant tous les éléments td dans les éléments tr. En effet, le sélecteur de descendants (>) sélectionne tous les descendants de l'élément spécifié, y compris ceux qui sont indirectement liés.

En revanche, le Fiddle [Sélecteur d'enfants] fourni (http://jsfiddle.net/ brLee/), qui utilise la table > tr> td, ne sélectionne aucun élément td car l'élément tr n'est pas un enfant direct de l'élément table.

Comportement du navigateur :

Dans les documents HTML, l'ajout implicite de l'élément tbody est un comportement par défaut des navigateurs pour garantir un rendu correct des tableaux. Cependant, dans les documents XHTML servis comme application/xhtml xml, cet ajout implicite ne se produit pas. Ainsi, en utilisant le sélecteur d'enfant (>) pour la table > tr> td dans les documents XHTML fonctionnera correctement.

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!