recherche

Maison >interface Web >tutoriel CSS >Utilisez le sélecteur de pseudo-classe :nth-last-child(2) pour sélectionner le style de l'avant-dernier élément enfant

Utilisez le sélecteur de pseudo-classe :nth-last-child(2) pour sélectionner le style de l'avant-dernier élément enfant

WBOY
WBOYoriginal
2023-11-20 11:22:471746parcourir

Utilisez le sélecteur de pseudo-classe :nth-last-child(2) pour sélectionner le style de lavant-dernier élément enfant

Utilisez le sélecteur de pseudo-classe :nth-last-child(2) pour sélectionner le style de l'avant-dernier élément enfant. Des exemples de code spécifiques sont requis

En CSS, le sélecteur de pseudo-classe est un outil très puissant qui. peut Utilisé pour sélectionner des éléments spécifiques dans l'arborescence du document. L'un d'eux est le sélecteur de pseudo-classe :nth-last-child(2), qui sélectionne l'avant-dernier élément enfant et lui applique des styles.

Tout d’abord, créons un exemple de document HTML afin de pouvoir y utiliser ce sélecteur de pseudo-classe. Voici un exemple simple : 

<!DOCTYPE html>
<html>
<head>
  <style>
    ul li:nth-last-child(2) {
      color: red;
    }
  </style>
</head>
<body>
  <ul>
    <li>第一个元素</li>
    <li>第二个元素</li>
    <li>第三个元素</li>
    <li>第四个元素</li>
    <li>第五个元素</li>
    <li>第六个元素</li>
  </ul>
</body>
</html>

Dans l'exemple ci-dessus, nous avons créé une liste non ordonnée (ul) et contient plusieurs éléments de liste (li). Nous sélectionnons et appliquons des styles à l'avant-dernier élément de la liste en utilisant le sélecteur de pseudo-classe :nth-last-child(2) en CSS. Dans cet exemple, nous définissons la couleur de police de l’avant-dernier élément de la liste sur rouge.

Lorsque nous ouvrons cet exemple de document dans le navigateur, nous constaterons que la couleur de police du cinquième élément de la liste passe au rouge car il s'agit de l'avant-dernier élément de la liste.

En utilisant le sélecteur de pseudo-classe :nth-last-child(2), nous pouvons facilement sélectionner et appliquer des styles à l'avant-dernier élément enfant lors de la création de pages Web. Qu'il s'agisse de mettre en évidence la deuxième option la plus importante dans un menu de navigation ou de mettre en évidence l'avant-dernier élément d'une liste, ce pseudo-sélecteur peut être d'une grande aide.

Pour cette raison, il est très important de maîtriser les sélecteurs de pseudo-classes en CSS. Ils peuvent nous apporter plus de flexibilité dans la mise en page et le style. J'espère que cet exemple simple pourra vous aider à mieux comprendre et utiliser le sélecteur de pseudo-classe :nth-last-child(2).

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!

css html 选择器 伪类 ul li
Déclaration：
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
Article précédent：Utilisez le sélecteur de pseudo-classe :only-child pour sélectionner les styles dans lesquels l'élément parent n'a qu'un seul élément enfant.Article suivant：Utilisez le sélecteur de pseudo-classe :only-child pour sélectionner les styles dans lesquels l'élément parent n'a qu'un seul élément enfant.

Articles Liés

Voir plus