使用第n個子模式在圖案中改變背景顏色

Question

我想創建一個網格，使用第n個子選擇器替代背景顏色。

我有一個三列的網格，圖案是4種顏色：藍色，橙色，綠色，紫色。

所以我的模式應該是這樣的：

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

的事情是，我無法弄清楚爲了acchieve這是否會影響到使用什麼公式。這裏是我的代碼，因爲它是現在：

.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.