交替只有1選擇每3個元素

Question

我tr元素的列表，我想對他們有以下模式添加CSS：

• 紅色
• 紅色
• 紅
• 黑
• 黑
• 黑
• 紅
• 紅色
• 紅色
• 黑

等

我怎樣才能做到這一點？現在我一直在使用：

tr:nth-child(6n+1) { color: red; } 
tr:nth-child(6n+2) { color: red; } 
tr:nth-child(6n+3) { color: red; } 

...但我怎麼能只用一個選擇器呢？

---

編輯：這裏是一個鏈接的jsfiddle https://jsfiddle.net/1s5s05vk/2/

Answer 1

我認爲它的運行速度更快，使用CSS。

.mytable tr:nth-child(6n+1), .mytable tr:nth-child(6n+2), .mytable tr:nth-child(6n+3) { 
    background-color: red; 
} 

但是，如果你想，你可以使用JavaScript來做到這一點。 正如我以前說過..你可以像「紅」一類添加到具有迭代％6（迭代器MOD 6）任何元素大於4

var rows = document.getElementsByTagName('tr'); 
for (var i = 0, len = rows.length; i < len; i++){ 
    if(i%6 < 4) { 
     rows[i].classList.add("red"); 
    } 
} 

Answer 2

嘗試。也許它可以幫助你。

tr:nth-child(-n+3) { 
     background: red; 
    } 
    tr:nth-child(n+4) { 
     background: blue; 
    } 

Answer 3

你想做的事不能用一個單獨的使用CSS的選擇器完成。

不過，可以縮短定義，所以你不要重複代碼：

tr:nth-child(6n+1), 
tr:nth-child(6n+2), 
tr:nth-child(6n+3) { 
    color: red; 
}