Question

我有一个tr元素的列表，我想用它们添加CSS，其格式如下：

红色
红色
红色
黑
黑
黑
红色
红色
红色
黑

等

我该怎么做？现在我一直在使用：

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

...但我怎么能只用1个选择器呢？

编辑：这是一个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的元素中添加类似“red”的类。

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;
}

每3个元素交替使用两种不同的颜色，只有1个选择器

3 个答案: