Pourquoi mon sélecteur enfant ne parvient-il pas à styliser les cellules du tableau ?-tutoriel CSS-php.cn

Why Does My Child Selector Fail to Style Table Cells?

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;
}

Copier après la connexion

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

éléments. Cependant, la deuxième règle, qui utilise le sélecteur d'enfant (>), ne parvient pas à styliser les éléments , qui à son tour est un enfant de

éléments.

Intrigués par ce comportement, les développeurs pourraient supposer que puisque

est un enfant de

, le sélecteur d'enfant doit s'appliquer.

La confusion vient de l'inclusion implicite d'un

élément en HTML. Par défaut, les navigateurs insèrent un élément à contenir éléments. En conséquence, la structure réelle de l'élément devient :

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

Copier après la connexion

Dans cette structure modifiée,

n'est plus un enfant direct de

, mais plutôt un enfant de , qui est lui-même un enfant de

. Par conséquent, le > le sélecteur ne peut pas cibler .

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

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

Copier après la connexion

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!

source：php.cn

Article précédent：Comment utiliser correctement « background-image » CSS pour la compatibilité entre navigateurs ? Article suivant：Comment jQuery peut-il être utilisé pour manipuler efficacement les styles CSS et quelles erreurs courantes doivent être évitées ?

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

2154

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

2305

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

1943

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...