Pourquoi `:last-of-type` ne parvient-il pas à sélectionner le dernier élément avec une classe spécifique ?

Pourquoi :last-of-type sélectionne incorrectement avec un attribut de classe

Dans le code HTML et CSS fourni, il est destiné uniquement le dernier élément avec la classe "visible" dans un div à afficher. Cependant, le sélecteur .class:last-of-type reste inefficace.

Le problème vient d'une idée fausse de la fonction de :last-of-type. Bien qu'il sélectionne avec précision le dernier élément d'un type particulier (dans ce cas, les éléments

), il ne prend pas en compte les attributs de classe spécifiques.

Fonctionnalité de pseudo-classe :

Le W3C définit :last-of-type comme : "Un élément qui est le dernier frère de son type." Son comportement peut être résumé comme suit :

1. Il identifie les éléments au sein de chaque élément conteneur dans le HTML.
2. Il localise le dernier élément de chaque ensemble d'éléments identifiés.
3. Il vérifie si l'élément sélectionné est un

4. Il vérifie la présence de l'attribut de classe ".visible".

Analyse du sélecteur :

Le sélecteur p. visible:last-of-type cible les éléments suivants :

• Identifie tous les

  éléments au sein de chaque div.

• Sélectionne le dernier

  élément dans chaque ensemble.

• Nécessite à la fois le dernier

  et l'attribut de classe ".visible".

Résultat :

Depuis seulement les deux premiers

les éléments ont la classe ".visible", aucun des éléments

les éléments deviennent visibles malgré l'utilisation correcte de :last-of-type.

Solution :

Pour sélectionner le dernier élément avec la classe ".visible", une approche différente est nécessaire. JavaScript ou une solution personnalisée basée sur des attributs CSS peut fournir une solution de contournement appropriée.

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!