Utilisez le sélecteur de pseudo-classe :nth-of-type pour sélectionner des styles à des positions spécifiques dans les éléments du même type.

Utilisez le sélecteur de pseudo-classe :nth-of-type pour sélectionner le style d'une position spécifique dans les éléments du même type

En CSS, nous devons souvent définir des styles pour des positions spécifiques dans les éléments du même type , comme les listes Un élément sur trois nécessite un style spécial, auquel cas le sélecteur de pseudo-classe :nth-of-type peut être utilisé à cette fin.

 : le sélecteur de pseudo-classe du nième de type peut sélectionner des éléments cibles en fonction de leur type et de leur position. Sa syntaxe est la suivante :

:nth-of-type(n)

où n est un paramètre indiquant la position, qui peut être un nombre spécifique ou un mot-clé. Par exemple, impair représente une position impaire, et pair représente. une position égale.

Voici un exemple spécifique :

Code HTML :

<ul>
  <li>第一个元素</li>
  <li>第二个元素</li>
  <li>第三个元素</li>
  <li>第四个元素</li>
  <li>第五个元素</li>
  <li>第六个元素</li>
  <li>第七个元素</li>
  <li>第八个元素</li>
</ul>

Code CSS :

li:nth-of-type(3n) {
  color: red;
}

Dans le code ci-dessus, nous utilisons le sélecteur :nth-of-type(3n) pour sélectionner un élément sur trois dans la liste, et réglez la couleur sur rouge. Selon les règles de ce sélecteur, ce style sera appliqué aux troisième, sixième et neuvième éléments.

Si nous voulons sélectionner des éléments à des positions impaires, nous pouvons utiliser le sélecteur :nth-of-type(impair) L'exemple de code est le suivant :

Code CSS :

li:nth-of-type(odd) {
  background-color: lightgray;
}

De cette façon, la couleur d'arrière-plan de. les éléments aux positions impaires dans la liste seront définis en gris clair.

En plus d'appliquer le sélecteur :ntième de type dans les listes, il peut également être utilisé pour d'autres types d'éléments, tels que des paragraphes, des titres, etc.

En bref, l'utilisation du sélecteur de pseudo-classe :nth-of-type peut atteindre l'objectif de styliser des positions spécifiques dans des éléments du même type. En définissant des paramètres spécifiques, nous pouvons sélectionner l'emplacement souhaité et lui appliquer un style spécifique. Ceci est très utile lorsqu’il s’agit de styliser un grand nombre d’éléments similaires, améliorant ainsi l’efficacité du développement.

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!