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

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

En CSS, les sélecteurs sont ce que nous utilisons pour sélectionner des éléments HTML et leur appliquer des styles. En plus des sélecteurs de base courants, tels que les sélecteurs d'éléments, les sélecteurs de classe et les sélecteurs d'ID, CSS fournit également des sélecteurs de pseudo-classe pour sélectionner des éléments spécifiques avec plus de précision.

L'un des sélecteurs de pseudo-classe couramment utilisés est : nth-last-of-type. Sa fonction est de sélectionner le nième élément frère du type spécifié parmi le dernier. Dans cet article, nous explorerons divers scénarios d'application du sélecteur de pseudo-classe :nth-last-of-type et fournirons des exemples de code détaillés.

1. Sélectionnez le dernier élément

Tout d'abord, examinons un scénario d'application simple, qui consiste à sélectionner le dernier élément frère d'un type spécifié. Disons que nous avons une liste HTML et que nous souhaitons y sélectionner le dernier élément de paragraphe et lui appliquer un style. Vous pouvez utiliser le sélecteur :nth-last-of-type(1) pour réaliser :

p:nth-last-of-type(1) {
  color: red;
}

2. Sélectionner l'avant-dernier élément

En plus de sélectionner le dernier élément, nous pouvons également sélectionner l'avant-dernier élément frère du type spécifié . Supposons que nous ayons une liste HTML contenant cinq éléments de paragraphe et que nous souhaitions sélectionner l'avant-dernier élément de paragraphe et lui appliquer un style. Utilisez le sélecteur :nth-last-of-type(2) pour obtenir :

p:nth-last-of-type(2) {
  font-weight: bold;
  color: blue;
}

3. Sélectionner des éléments à des positions impaires

:le sélecteur nth-last-of-type peut également être utilisé pour sélectionner des frères du type spécifié à élément de positions impaires. Par exemple, nous avons une liste HTML contenant six éléments de paragraphe et nous souhaitons sélectionner les éléments de paragraphe à des positions impaires et leur appliquer des styles. Vous pouvez utiliser le sélecteur :nth-last-of-type (impair) pour obtenir :

p:nth-last-of-type(odd) {
  background-color: yellow;
}

4. Sélectionner des éléments à des positions paires

De même, nous pouvons également utiliser le sélecteur :nth-last-of-type pour sélectionner des éléments pairs. positions Un élément frère du type spécifié. Par exemple, nous avons une liste HTML qui contient six éléments de paragraphe et nous souhaitons sélectionner l'élément de paragraphe situé à un numéro pair et lui appliquer un style. Vous pouvez utiliser le sélecteur :ntième-dernier-de-type(pair) pour réaliser :

p:nth-last-of-type(even) {
  background-color: pink;
}

5. Sélectionner une plage spécifique d'éléments

Le sélecteur :ième-dernier-de-type peut également être utilisé en combinaison avec d'autres sélecteurs pour sélectionner Une plage spécifique d’éléments frères du type spécifié. Par exemple, nous avons une liste HTML qui contient dix éléments de paragraphe, et nous souhaitons uniquement sélectionner les éléments de paragraphe entre le 3ème et le 6ème paragraphe et leur appliquer des styles. Ceci peut être réalisé en utilisant le sélecteur :nth-last-of-type(n+3):nth-last-of-type(-n+6) :

p:nth-last-of-type(n+3):nth-last-of-type(-n+6) {
  border: 1px solid black;
}

Résumé :

Dans cet article, nous avons introduit CSS : Divers scénarios d'application du sélecteur de pseudo-classe de nième-dernier type et des exemples de code correspondants sont fournis. En utilisant le sélecteur :nth-last-of-type, nous pouvons sélectionner plus précisément le nième élément frère d'un type spécifié à partir du bas et lui appliquer des styles. J'espère que cet article pourra vous aider à comprendre et à appliquer le sélecteur nième-dernier-type.

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!