交替只有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; 
}