Pourquoi mon sélecteur d'enfant CSS ne fonctionne-t-il pas sur des éléments profondément imbriqués ?

Sélecteur d'enfant CSS : pourquoi ne puis-je pas sélectionner directement les descendants ?

En CSS, le sélecteur d'enfant (>) désigne un relation parent-enfant entre les éléments. Cependant, l’application du sélecteur d’enfants aux descendants de descendants peut échouer. Prenons l'exemple suivant :

table > tr > td

Ce sélecteur sélectionnera correctement les éléments td, car un élément td est un enfant direct d'un élément tr et tr est un enfant direct d'un élément table. Cependant, le sélecteur suivant échoue :

table > tr > td

Comprendre l'élément tbody manquant

Les documents HTML créent implicitement un élément tbody pour contenir des éléments tr, sauf définition explicite. En tant que tel, tr n'est jamais un enfant direct de la table, rompant ainsi la relation directe parent-enfant requise par le sélecteur d'enfant.

La solution : ajouter des sélecteurs de corps

À pour résoudre ce problème, vous devez ajouter le sélecteur tbody pour combler l'écart entre table et tr :

table > tbody > tr > td

Implications pour XHTML Documents

Les documents XHTML servis en tant qu'application/xhtml xml ne créent pas d'éléments tbody implicites. Par conséquent, le sélecteur ci-dessus échouerait toujours dans ce contexte. Vous devrez ajouter explicitement un élément tbody ou utiliser une approche différente.

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!