css - 对 css nth-child 求模

Question

我想找到一种方法来按照某种模式向 div 显示一些颜色。

我发现了一个使用模数的技巧，但它似乎不适用于 CSS...

因此，如下面的 codepen 示例所示:

• 蓝色背景属性应应用于 1,8,13,20,25... block -> 我们可以看到每个状态之间的差异是:7 then 5 then 7 then 5 ...

• 绿色背景属性应应用于 4,9,16,21... block -> 我们可以看到每个状态之间的差异是:5 then 7 then 5 then 7 ...

• 橙色背景属性应应用于 5,12,17,24... block -> 我们可以看到每个状态之间的差异是:7 then 5 then 7 then 5 ...(就像蓝色一样)

我尝试使用 nth-child 但我数学不太好。 请问有什么想法吗？

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() 来解决。

We can see that the diff between each states are : 7 then 5 then 7 then 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 -----|

With this in mind, for the sequence that starts with 1 followed by 8, use div:nth-child(12n+1) and div:nth-child(12n+8). The same follows with the other sequences.

Thus:

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>