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>