Question

我正在尝试使用第n个子选择器创建一个背景颜色交替的网格。

我有一个有三列的网格，图案有4种颜色：蓝色，橙色，绿色，紫色。

所以我的模式应该是这样的：

o | b | g
p | o | b
g | p | o

问题是，我无法弄清楚使用什么公式来达到这种效果。这是我现在的代码：

.mask { /*orange*/
    background-color: rgba(235,167,32, 0.7);
}

.view:nth-child(2n+2) .mask { /*blue*/
    background-color: rgba(4,141,195, 0.7);
}

.view:nth-child(3n+3) .mask { /*green*/
    background-color: rgba(0,211,130, 0.7);
}

.view:nth-child(4n+4) .mask { /*purple*/
    background-color: rgba(185,40,141, 0.7);
}

这是错误的模式：

b | g | p
o | g | o
p | g | b

如果有人可以在这里提供一些指导，我非常感谢！

Answer 1

JSFIDDLE DEMO

 .view:nth-child(4n+2) .mask 
   { /*orange*/
     background-color: orange;
   }

   .view:nth-child(4n+3) .mask 
   { /*blue*/
      background-color: blue;
   }

  .view:nth-child(4n+4) .mask 
  { /*green*/
    background-color: green;
  }

  .view:nth-child(4n+5) .mask 
  { /*purple*/
    background-color: purple;
  }

<强>解释

 I don't see your HTML. I assumed totally 9 divs. 
 First one is Orange and then blue, green, purple .
 It repeats for one more cycle. Ends with one orange.

使用nth-child在模式中改变背景颜色

1 个答案: