第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（如您目前）

希望這有助於。