第n个孩子在css中没有重复

Question

我想设置第1项到第10项,而不是第1项

&.nth-child(1) { //style } 
&.nth-child(2) { //style } 
&.nth-child(3) { //style } 

等等..

css中的任何范围选择器？

Answer 1

您可以使用:nth-child与方程式an+b格式(如更换a和b一个整数和n会0, 1, 2,....).

li:nth-child(-n+10) {
  color: red
}

<ol>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
</ol>

更新:如果您需要一个范围内的元素,那么使用多个:nth-child选择器.

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

<ol>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
</ol>