Html 第n个子选择器css

我这里有一个div模式，这个模式至少有9个

，并且这个模式是重复的。给出了div的背景色

    1 white
    2 green
    3 white
    4 green
    5 white
    6 green
    7 green
    8 white
    9 green

所以为了让它工作，我写了以下css

  $(".test:nth-child(odd)").css("background-color","green");
  $(".test:nth-child(even)").css("background-color","green");
  $(".test:nth-child(7n)").css("background-color","green");
  $(".test:nth-child(8n)").css("background-color","white");
  $(".test:nth-child(9n)").css("background-color","green");  

现在一切正常，但问题是当div数超过9时，第10个div从背景绿色开始，但它必须是白色

例如，如果有18个div，则

    1  white
    2  green
    3  white
    4  green
    5  white
    6  green
    7  green
    8  white
    9  green
    10 white
    11 green
    12 white
    13 green
    14 white
    15 green
    16 green
    17 white
    18 green

---

请推荐一个好的公式来解决这个问题。嗨，我希望这个对你有帮助 使用这个css

HTML:

<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>

  .test{
  height:100px;
  width:100px;
  margin:10px;
  }
  .test:nth-child(9n+1){background-color:white;}
  .test:nth-child(9n+2){background-color:green;}
  .test:nth-child(9n+3){background-color:white;}
  .test:nth-child(9n+4){background-color:green;}
  .test:nth-child(9n+5){background-color:white;}
  .test:nth-child(9n+6){background-color:green;}
  .test:nth-child(9n+7){background-color:green;}
  .test:nth-child(9n+8){background-color:white;}
  .test:nth-child(9n+9){background-color:green;}

---

请参阅JSFIDLE

嗨，我希望这本书对你有帮助 使用这个css

HTML:

<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>

  .test{
  height:100px;
  width:100px;
  margin:10px;
  }
  .test:nth-child(9n+1){background-color:white;}
  .test:nth-child(9n+2){background-color:green;}
  .test:nth-child(9n+3){background-color:white;}
  .test:nth-child(9n+4){background-color:green;}
  .test:nth-child(9n+5){background-color:white;}
  .test:nth-child(9n+6){background-color:green;}
  .test:nth-child(9n+7){background-color:green;}
  .test:nth-child(9n+8){background-color:white;}
  .test:nth-child(9n+9){background-color:green;}

---

请参见JSFIDLE

：第n个child

在数字旁边不带“n”的情况下工作（在本例中）。

：第n个child

在数字旁边不带“n”的情况下工作（在本例中）。

如果我错了，请纠正我，但我认为您希望反转7之后的模式（应该是白色，但您希望它是绿色）

.test{
填充物：5px；
边框：1px纯黑；
保证金：5px；
显示：内联块；
}
/*从1岁开始每隔一个孩子*/
.测试：第n个孩子（2n+1）{
背景色：白色；
}
/*从2岁开始每隔一个孩子*/
.测试：第n个孩子（2n+2）{
背景颜色：绿色；
}
/*从7岁开始每隔一个孩子*/
.测试：第n个孩子（2n+7）{
背景颜色：绿色；
}
/*从8岁开始每隔一个孩子*/
.测试：第n个孩子（2n+8）{
背景色：白色；
}
/*从16岁开始每隔一个孩子*/
.测试：第n个孩子（2n+16）{
背景颜色：绿色；
}
/*从17岁开始每隔一个孩子*/
.测试：第n个孩子（2n+17）{
背景色：白色；
}

1白色
2绿色
3白色
4绿色
5白色
6绿色
7绿色
8白色
9绿色
10白色
11绿色
12白色
13绿色
14白色
15绿色
16绿色
17白色
18绿色
19白色
20绿色
21白色
22绿色
23白色
24绿色
25白色
26绿色

如果我错了，请纠正我，但我认为您希望在7之后反转模式（该模式应为白色，但您希望它为绿色）

.test{
填充物：5px；
边框：1px纯黑；
保证金：5px；
显示：内联块；
}
/*从1岁开始每隔一个孩子*/
.测试：第n个孩子（2n+1）{
背景色：白色；
}
/*从2岁开始每隔一个孩子*/
.测试：第n个孩子（2n+2）{
背景颜色：绿色；
}
/*从7岁开始每隔一个孩子*/
.测试：第n个孩子（2n+7）{
背景颜色：绿色；
}
/*从8岁开始每隔一个孩子*/
.测试：第n个孩子（2n+8）{
背景色：白色；
}
/*从16岁开始每隔一个孩子*/
.测试：第n个孩子（2n+16）{
背景颜色：绿色；
}
/*从17岁开始每隔一个孩子*/
.测试：第n个孩子（2n+17）{
背景色：白色；
}

1白色
2绿色
3白色
4绿色
5白色
6绿色
7绿色
8白色
9绿色
10白色
11绿色
12白色
13绿色
14白色
15绿色
16绿色
17白色
18绿色
19白色
20绿色
21白色
22绿色
23白色
24绿色
25白色
26绿色

请提供HTML。为什么6和7都是绿色的？这是一个错误还是预期的模式？也是红色！=绿色。用你迄今为止尝试过的内容制作一个演示吗？@Harry，这是预期模式。请提供HTML。为什么六和七都是绿色的？这是一个错误还是预期的模式？也是红色！=格林。用你迄今为止试过的东西制作一个演示吗？@Harry，这是应该的。谢谢。但这是错误的。请看问题。好的，谢谢。请投票给我的ans，让我知道你到底想要什么。谢谢投票和以上评论。IDLE是你正确的答案谢谢。但这是错误的。请看问题。好的，谢谢。请投票给我的ans，让我知道你到底想要什么。谢谢投票和上面的评论。IDLE是你正确的答案对不起，朋友。有一个错误。到18岁是可以的。但在那之后，模式就不再重复了。@Manik你希望它做什么？在我的示例中，我已经增加到26（我已经更新了它），并且它按照我的预期工作。对不起，朋友。有一个错误。到18岁是可以的。但在那之后，模式就不再重复了。@Manik你希望它做什么？在我的示例中，我已经增加到26（我已经更新了它），并且它按照我的预期工作。