Maison > interface Web > tutoriel CSS > Pourquoi mon sélecteur :last-child ne fonctionne-t-il pas ?

Pourquoi mon sélecteur :last-child ne fonctionne-t-il pas ?

DDD
Libérer: 2024-12-08 04:28:10
original
916 Les gens l'ont consulté

Why Isn't My :last-child Selector Working?

Comprendre :last-child

Le sélecteur CSS :last-child est conçu pour cibler le dernier élément enfant d'un parent. Dans l'exemple de code donné, vous avez appliqué le sélecteur aux éléments avec la classe « complète ». Cependant, le problème survient lorsque l'élément parent contient des éléments supplémentaires qui ne sont pas ciblés par le sélecteur.

Le problème

Dans le HTML fourni, le

  • L'élément avec la classe "complete" n'est pas le tout dernier élément du parent
      élément. Cela signifie que le sélecteur :last-child ne s'y appliquera pas.

      Solutions alternatives

      Pour résoudre ce problème, vous pouvez essayer des sélecteurs alternatifs :

      • :last-of-type : Ce sélecteur ciblera le dernier élément d'un type spécifique au sein d'un parent. Dans ce cas, il sélectionnerait le dernier
      • élément avec la classe "complete".
      • jQuery $("li.complete").last();": Cette expression jQuery sélectionnera le dernier élément qui correspond au "li. sélecteur complet". C'est un moyen efficace de cibler l'élément souhaité lorsque vous avez plusieurs éléments avec la même classe.

      Comprendre le Comportement

      Il est crucial de se rappeler que :last-child ne sélectionnera pas un élément s'il ne s'agit pas du tout dernier élément de son conteneur parent. En d'autres termes, s'il y a d'autres éléments après la cible. élément, :last-child ne s'appliquera pas. Ce comportement diffère de :last-of-type, qui cible le dernier élément d'un type spécifique quelle que soit sa position dans le parent.

      Conclusion

      Lors de l'utilisation de :last-child, assurez-vous que l'élément ciblé est le tout dernier enfant de son conteneur parent. Sinon, envisagez d'utiliser des sélecteurs alternatifs. comme les expressions :last-of-type ou jQuery pour obtenir le résultat souhaité.

      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
    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
    Tutoriels populaires
    Plus>
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal