Utilisez le sélecteur de pseudo-classe :nth-last-of-type(3) pour sélectionner le style de l'avant-dernier élément parmi le même type

Utilisez le sélecteur de pseudo-classe :nth-last-of-type(3) pour sélectionner l'avant-dernier style parmi les éléments du même type. Des exemples de code spécifiques sont requis

En CSS, nous avons souvent besoin. pour sélectionner le style de l'avant-dernier élément de la page Web. Les éléments sont stylisés. Parfois, nous devons sélectionner l’avant-dernier élément parmi le même type d’éléments et lui appliquer un style spécifique. À ce stade, nous pouvons utiliser le sélecteur de pseudo-classe :nth-last-of-type(3) pour effectuer cette tâche.

Tout d'abord, jetons un œil à la syntaxe du sélecteur de pseudo-classe :nth-last-of-type(3) :

:nth-last-of-type(n)

Dans le code ci-dessus, n représente un entier , indiquant que l'on souhaite sélectionner l'avant-dernier élément. Dans notre exigence, nous devons sélectionner l’avant-dernier élément, nous définissons donc n sur 3.

Ensuite, regardons un exemple spécifique :

Code HTML :

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
    <li>列表项5</li>
    <li>列表项6</li>
</ul>

Code CSS :

li:nth-last-of-type(3) {
    color: red;
    font-weight: bold;
}

Dans l'exemple ci-dessus, nous avons une liste non ordonnée contenant 6 éléments de liste. Nous souhaitons sélectionner l’avant-dernier élément de la liste et lui appliquer une police rouge et un style gras. Nous pouvons utiliser le sélecteur :nth-last-of-type(3) pour atteindre cet objectif.

Lorsque nous exécutons le code ci-dessus, l'élément de liste 4 sera sélectionné comme avant-dernier élément, et une police rouge et un style gras seront appliqués. Les autres éléments de la liste ne seront pas affectés.

Un rappel ici, lors de l'utilisation du sélecteur :nth-last-of-type(3), nous devons faire attention à la relation hiérarchique du sélecteur. Si notre élément cible n'est pas un élément descendant direct, mais est imbriqué dans d'autres éléments, nous devons alors ajuster la façon dont le sélecteur est écrit en fonction de la situation spécifique. Concernant les règles hiérarchiques des sélecteurs, vous pouvez vous référer aux spécifications pertinentes des sélecteurs CSS.

Pour résumer, l'utilisation du sélecteur de pseudo-classe :nth-last-of-type(3) peut facilement sélectionner l'avant-dernier élément parmi le même type et lui appliquer le style spécifié. Grâce aux exemples ci-dessus, nous pouvons rapidement démarrer et comprendre comment utiliser ce sélecteur, afin de mieux l'appliquer dans le développement réel.

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!