Modulo CSS nth-child

Question

我想找到一種方法來顯示一些模式下的顏色div。

我發現使用模一招，但它似乎並不與CSS工作...

因此，如下面的codepen例如：

• 藍色背景屬性應適用在1,8,13,20,25 ...塊 - >我們可以看到每個狀態之間的差異是：7然後是5然後是7然後是5 ...

• 綠色背景屬性應該是適用於4,9,16,21 ...塊 - >我們可以看到，每種狀態之間的差異是：5然後7然後5然後7 ...

• 橙色背景屬性應該適用於5,12,17,24 ...塊 - >我們可以看到，每個國家之間的差異是：7 5 7，然後再用5 ...（就像藍色）

我試圖用第n個孩子，但我不是數學真的很好。 有什麼想法嗎？

http://codepen.io/anon/pen/QjyaRB

<div class="blue">blue</div> 
    <div class="white">white</div> 
    <div class="white">white</div> 
    <div class="green">green</div> 
    <div class="orange">orange</div> 

    <div class="white">white</div> 
    <div class="white">white</div> 
    <div class="blue">blue</div> 
    <div class="green">green</div> 
    <div class="white">white</div> 
    <div class="white">white</div> 
    <div class="orange">orange</div> 

    <div class="blue">blue</div> 
    <div class="white">white</div> 
    <div class="white">white</div> 
    <div class="green">green</div> 
    <div class="orange">orange</div> 

    <div class="white">white</div> 
    <div class="white">white</div> 
    <div class="blue">blue</div> 
    <div class="green">green</div> 
    <div class="white">white</div> 
    <div class="white">white</div> 
    <div class="orange">orange</div> 

Answer 1

如前所述here，:nth-child()不支持模運算。也就是說，這個問題仍然可以使用:nth-child()來解決。

我們可以看到，每個國家之間的差異是：7 5 7，然後再用5 ...

的5和7的總和爲12。你有什麼本質上，有兩種與12的間隔，只是略有不同的出發點，這樣的序列是5和7之間每兩個點交替之間的差異這裏有一個圖來告訴你我是什麼意思：

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

考慮到這一點，對於從1開始，然後是8開始的序列，請使用div:nth-child(12n+1)和div:nth-child(12n+8)。其他序列也一樣。

因此：

div { 
 
    height: 40px; 
 
} 
 

 
/* 1, 8, 13, 20, 25... */ 
 
div:nth-child(12n+1), 
 
div:nth-child(12n+8) { 
 
    background-color: blue; 
 
} 
 

 
/* 4, 9, 16, 21... */ 
 
div:nth-child(12n+4), 
 
div:nth-child(12n+9) { 
 
    background-color: green; 
 
} 
 

 
/* 5, 12, 17, 24... */ 
 
div:nth-child(12n+5), 
 
/* Note: 12n+12, 12n+0, and 12n are all equivalent */ 
 
div:nth-child(12n+12) { 
 
    background-color: orange; 
 
}

<div class="blue">blue</div> 
 
<div class="white">white</div> 
 
<div class="white">white</div> 
 
<div class="green">green</div> 
 
<div class="orange">orange</div> 
 

 
<div class="white">white</div> 
 
<div class="white">white</div> 
 
<div class="blue">blue</div> 
 
<div class="green">green</div> 
 
<div class="white">white</div> 
 
<div class="white">white</div> 
 
<div class="orange">orange</div> 
 

 
<div class="blue">blue</div> 
 
<div class="white">white</div> 
 
<div class="white">white</div> 
 
<div class="green">green</div> 
 
<div class="orange">orange</div> 
 

 
<div class="white">white</div> 
 
<div class="white">white</div> 
 
<div class="blue">blue</div> 
 
<div class="green">green</div> 
 
<div class="white">white</div> 
 
<div class="white">white</div> 
 
<div class="orange">orange</div>