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

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

WBOY

Libérer： 2023-11-20 11:22:47

original

1751 Les gens l'ont consulté

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>

Copier après la connexion

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!