Question

我希望将项目1设置为10，而不是执行

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

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

更新：如果您需要某个范围内的元素，请使用多个:nth-child选择器。

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

1.x

Answer 2

以下代码段将css应用于2到3之间。根据您的要求调整它。

<强>解释

nth-child(n+2)开始从第2个元素中选择转发。 nth-child(-n+3)开始从第3个元素向后选择。

在范围内合并两个结果。

li:nth-child(n+2):nth-child(-n+3){
background: #000;
color: #fff
}

<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>

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

2 个答案: