第n个孩子选择器css

Question

我在这里有一个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"); 

现在的一切工作，但问题是，当申报单的数量达到超过9，则第10 div从背景绿色开始，但它需要是白色的。

例如，如果有18个格，然后

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

嗨，我希望这一个是帮助ü 使用这一个使用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 2

:nth-child作品没有 “N”，这是旁边的数字（在这种情况下）。

Answer 3

纠正我，如果我错了，但我想你想逆7后模式（这应该是白色的，但你希望它绿色）

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

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

我的评论代码，使其更容易理解

我用CSS，但如果你喜欢，你可以把这个使用jQuery（如您目前）

希望这有助于。