Comment utiliser :nth-child(-n+5) sélecteur de pseudo-classe pour sélectionner le style CSS des éléments enfants dont la position est inférieure ou égale à 5

Comment utiliser le sélecteur de pseudo-classe nth-child(-n+5) pour sélectionner le style CSS des éléments enfants avec des positions inférieures ou égales à 5

En CSS, le sélecteur de pseudo-classe est un puissant outil qui peut être des méthodes de sélection spécifiques pour sélectionner certains éléments dans les documents HTML. Parmi eux, :nth-child() est un sélecteur de pseudo-classe couramment utilisé qui peut sélectionner des éléments enfants à des positions spécifiques.

:nth-child(n) peut correspondre au nième élément enfant en HTML, et :nth-child(-n) peut correspondre à l'avant-dernier nième élément enfant en HTML. En combinant les deux, nous pouvons utiliser :nth-child(-n+5) pour sélectionner des éléments enfants avec des positions inférieures ou égales à 5.

Les exemples de codes spécifiques sont les suivants :

Code HTML :

<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>

Code CSS :

ul li:nth-child(-n+5) {
  color: red;
}

Dans le code ci-dessus, nous avons sélectionné le liul élément enfant /code> et définissez la couleur de son texte sur rouge. ul元素中位置小于等于5的li子元素，并将其文本颜色设置为红色。

运行以上代码，结果会发现列表项1到列表项5的文本颜色被设置为红色，而列表项6到列表项10的文本颜色保持默认。

需要注意的是，:nth-child()选择器是基于子元素的位置进行选择的。如果在ul元素中存在其他类型的子元素，如div、span等，并不会对它们起作用，只会选择li元素。所以在使用该选择器时要注意HTML结构的层次关系。

除了文本颜色，:nth-child(-n+5)选择器也可以用于设置其他样式，比如背景色、字体大小等。只需要将color: red

Exécutez le code ci-dessus et vous constaterez que la couleur du texte des éléments de la liste 1 à 5 est définie sur rouge, tandis que la couleur du texte des éléments de la liste 6 à 10 reste par défaut.

Il convient de noter que le sélecteur :nth-child() sélectionne en fonction de la position de l'élément enfant. S'il existe d'autres types de sous-éléments dans l'élément ul, tels que div, span, etc., cela ne fonctionnera pas sur eux et sélectionnera uniquement l'élément li. Ainsi, lorsque vous utilisez ce sélecteur, vous devez faire attention à la relation hiérarchique de la structure HTML. 🎜🎜En plus de la couleur du texte, le sélecteur :nth-child(-n+5) peut également être utilisé pour définir d'autres styles, tels que la couleur d'arrière-plan, la taille de la police, etc. Remplacez simplement color: red par le paramètre de style correspondant. 🎜🎜En bref, en utilisant le sélecteur de pseudo-classe :nth-child(-n+5), nous pouvons simplement sélectionner des éléments enfants avec des positions inférieures ou égales à 5 et leur appliquer des styles CSS spécifiques, obtenant ainsi un web plus flexible. conception . 🎜

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!