Implémenter divers scénarios d'application du sélecteur de pseudo-classe CSS :nth-last-child

Pour implémenter divers scénarios d'application du sélecteur de pseudo-classe CSS : ntième-dernier-enfant, des exemples de code spécifiques sont requis

En CSS, il existe de nombreux sélecteurs de pseudo-classe qui peuvent nous aider à sélectionner et styliser les éléments HTML avec plus de précision . Parmi eux, le sélecteur de pseudo-classe :nth-last-child est un sélecteur très puissant et pratique, qui peut sélectionner des éléments spécifiques en fonction de leur position dans l'élément parent. Dans cet article, nous explorerons : divers scénarios d'application du sélecteur de pseudo-classe nième-dernier enfant et fournirons des exemples de code spécifiques.

1. Sélectionnez le dernier élément enfant

Utilisez :nth-last-child(1) pour sélectionner le dernier élément enfant de l'élément parent. Voici un exemple :

Code HTML :

<div class="parent">
  <div>第一个元素</div>
  <div>第二个元素</div>
  <div>第三个元素</div>
  <div>第四个元素</div>
</div>

Code CSS :

.parent div:nth-last-child(1) {
  color: red;
}

Dans le code ci-dessus, utilisez le sélecteur :nth-last-child(1) pour sélectionner le dernier élément enfant de l'élément parent et La couleur est mis en rouge.

2. Sélectionnez l'avant-dernier élément enfant

Utilisez:nth-last-child(2) pour sélectionner l'avant-dernier élément enfant dans l'élément parent. Voici un exemple :

Code HTML :

<div class="parent">
  <div>第一个元素</div>
  <div>第二个元素</div>
  <div>第三个元素</div>
  <div>第四个元素</div>
</div>

Code CSS :

.parent div:nth-last-child(2) {
  color: blue;
}

Dans le code ci-dessus, utilisez le sélecteur :nth-last-child(2) pour sélectionner l'avant-dernier élément enfant dans l'élément parent , et sa couleur est définie sur bleu.

3. Sélectionnez l'avant-dernier élément enfant du dernier

Utilisez:nth-last-child(n+3):nth-last-child(-n+1) pour sélectionner l'avant-dernier élément enfant dans l'élément parent au dernier élément enfant. Voici un exemple :

Code HTML :

<div class="parent">
  <div>第一个元素</div>
  <div>第二个元素</div>
  <div>第三个元素</div>
  <div>第四个元素</div>
  <div>第五个元素</div>
</div>

Code CSS :

.parent div:nth-last-child(n+3):nth-last-child(-n+1) {
  color: orange;
}

Dans le code ci-dessus, utilisez la sélection :nth-last-child(n+3):nth-last-child(-n+1) Le selector sélectionne l'avant-dernier élément enfant de l'élément parent et définit sa couleur sur orange.

4. Sélectionner des éléments enfants à des positions impaires

Avec l'aide du sélecteur :ntième-dernier-enfant (impair), nous pouvons sélectionner des éléments enfants à des positions impaires. Voici un exemple :

Code HTML :

<div class="parent">
  <div>第一个元素</div>
  <div>第二个元素</div>
  <div>第三个元素</div>
  <div>第四个元素</div>
  <div>第五个元素</div>
</div>

Code CSS :

.parent div:nth-last-child(odd) {
  background-color: lightgray;
}

Dans le code ci-dessus, utilisez le sélecteur :nth-last-child(odd) pour sélectionner les éléments enfants à des positions impaires dans l'élément parent et sélectionnez eux La couleur d'arrière-plan est définie sur gris clair.

Grâce à cet article, nous avons appris à utiliser le sélecteur de pseudo-classe :nth-last-child pour implémenter divers scénarios d'application. Ce sélecteur de pseudo-classe est très utile dans le développement réel et très pratique lorsqu'il s'agit de certaines exigences spécifiques de mise en page et de style. Grâce à la combinaison de différents paramètres, nous pouvons sélectionner différentes positions de l'élément cible et obtenir des effets de style plus complexes.

J'espère que cet article pourra vous aider à mieux comprendre et apprendre le sélecteur de pseudo-classe :nth-last-child en CSS, ainsi que ses différents scénarios d'application. Je vous souhaite de meilleurs résultats avec le style CSS !

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!