Comment utiliser : sélecteur de pseudo-classe nième de type (3n+1) pour sélectionner les styles CSS d'éléments du même type dont les positions répondent à la condition 3n+1

Comment utiliser le sélecteur de pseudo-classe nth-of-type(3n+1) pour sélectionner le style CSS des éléments du même type dont la position répond à la condition 3n+1. Des exemples de code spécifiques sont nécessaires

Dans. CSS, nous devons souvent appliquer différents styles aux éléments à des positions spécifiques. Le sélecteur de pseudo-classe :nth-of-type(3n+1) fournit un moyen pratique de sélectionner les positions qui répondent à la condition 3n+1 parmi les éléments du même type et de leur appliquer des styles. Le principe de fonctionnement du sélecteur

:nth-of-type(3n+1) est qu'il sélectionnera les éléments du même type qui satisfont à la position 3n+1. Parmi eux, n représente un entier et 3n+1 représente la position qui remplit les conditions, telles que 1, 4, 7, etc.

Ensuite, nous utiliserons des exemples de code spécifiques pour illustrer comment utiliser le sélecteur :nth-of-type(3n+1).

Tout d’abord, nous devons disposer d’un ensemble d’éléments HTML du même type. Prenons comme exemple une liste non ordonnée :

<ul>
  <li>第1个元素</li>
  <li>第2个元素</li>
  <li>第3个元素</li>
  <li>第4个元素</li>
  <li>第5个元素</li>
  <li>第6个元素</li>
  <li>第7个元素</li>
  <li>第8个元素</li>
  <li>第9个元素</li>
  <li>第10个元素</li>
</ul>

Ensuite, nous voulons appliquer des styles aux éléments qui répondent à la condition 3n+1 (c'est-à-dire les positions 1, 4, 7, etc.). Nous pouvons utiliser le sélecteur :nth-of-type(3n+1) pour accomplir cette tâche. Par exemple, nous souhaitons définir la couleur d’arrière-plan de ces éléments sur rouge et la couleur de police sur blanc. Le code est le suivant :

li:nth-of-type(3n+1) {
  background-color: red;
  color: white;
}

Ajoutez le code ci-dessus au fichier CSS et associez le fichier CSS au fichier HTML. Ouvrez le navigateur et affichez la page. Vous verrez que le style correspondant a été appliqué aux éléments aux positions qui répondent à la condition 3n+1.

J'espère qu'à travers les exemples de code et les explications ci-dessus, vous avez compris comment utiliser le sélecteur de pseudo-classe :nth-of-type(3n+1) pour sélectionner des éléments du même type dont les positions répondent à la condition 3n+1. et appliquez-leur des styles CSS. Cette technique est souvent utilisée dans des projets réels et j'espère qu'elle vous sera utile.

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!