Question

我这里有一个div模式，这个模式最少有9个<div class="abc">，这个模式正在重复。 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

请建议好的公式来解决这个问题

Answer 1

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

＆＃13;

.test {
  padding: 5px;
  border: 1px solid black;
  margin: 5px;
  display: inline-block;
}

/* Every other child starting at 1 */
.test:nth-child(2n + 1) {
  background-color: white;
}

/* Every other child starting at 2 */
.test:nth-child(2n + 2) {
  background-color: green;
}

/* Every other child starting at 7 */
.test:nth-child(2n + 7) {
  background-color: green;
}

/* Every other child starting at 8 */
.test:nth-child(2n + 8) {
  background-color: white;
}

/* Every other child starting at 16 */
.test:nth-child(2n + 16) {
  background-color: green;
}

/* Every other child starting at 17 */
.test:nth-child(2n + 17) {
  background-color: white;
}

＆＃13;

<div class="test">1 white</div>
<div class="test">2 green</div>
<div class="test">3 white</div>
<div class="test">4 green</div>
<div class="test">5 white</div>
<div class="test">6 green</div>
<div class="test">7 green</div>
<div class="test">8 white</div>
<div class="test">9 green</div>
<div class="test">10 white</div>
<div class="test">11 green</div>
<div class="test">12 white</div>
<div class="test">13 green</div>
<div class="test">14 white</div>
<div class="test">15 green</div>
<div class="test">16 green</div>
<div class="test">17 white</div>
<div class="test">18 green</div>
<div class="test">19 white</div>
<div class="test">20 green</div>
<div class="test">21 white</div>
<div class="test">22 green</div>
<div class="test">23 white</div>
<div class="test">24 green</div>
<div class="test">25 white</div>
<div class="test">26 green</div>

＆＃13;

我已对代码进行了评论，以便于理解

我已经使用过CSS，但如果你愿意，可以用Jquery设置它（就像你现在一样）

希望这有帮助。

Answer 2

嗨，我希望这个能帮助你使用这个使用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>

<强>的CSS：

  .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;}

请参阅jsfiddle https://jsfiddle.net/db0eedrL/2/

Answer 3

:nth-child无法使用＆＃34; n＆＃34;它紧挨着数字（在这种情况下）。

第n个孩子选择器css

3 个答案: