Question

我正在制作一张桌子，我需要的不仅仅是“tr”的两种背景色。我现在正在使用的是：

.forum_table tr:nth-child(odd) { 
background-color:#f6f6f6; 
}

.forum_table  tr:nth-child(even) { 
background-color:#ffffff; 
}

但是我需要为同一张桌子提供多达5种不同的背景颜色。有什么方法可以用CSS做到这一点，还是我需要用PHP做这件事，我不是很擅长？

Answer 1

您可以执行类似

的操作

Demo

table tr:nth-of-type(5n+1) {
    background: #f00;
}

table tr:nth-of-type(5n+2) {
    background: #0f0;
}

table tr:nth-of-type(5n+3) {
    background: #5d54fd;
}

table tr:nth-of-type(5n+4) {
    background: #564844;
}

table tr:nth-of-type(5n+5) {
    background: #00f;
}

说明：使用(int)n会选择每个+ nth tr元素，这样您就可以选择n个颜色组合，而不仅仅是奇数和偶数

Answer 2

:nth-child(kn) [其中k是整数]选择器是你的英雄：

.forum_table  tr:nth-child(n){ ... }
.forum_table  tr:nth-child(2n){ ... }
.forum_table  tr:nth-child(3n){ ... }
...
.forum_table  tr:nth-child(kn){ ... }

使用CSS创建多种背景颜色

2 个答案: