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

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!