创建多背景颜色<；tr>；使用CSS - Creating multi background colors <tr> with CSS

Creating multi background colors <tr> with CSS

本文关键字：tr 使用 CSS gt lt 背景颜色创建 | 更新日期: 2023-09-27

我正在处理一个表，它需要两种以上的"tr"背景色。我现在使用的是：

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

但同一张桌子最多需要5种不同的背景色。有没有什么方法可以用CSS做到这一点，或者我需要用我不太擅长的PHP做到这一步？

您可以执行类似的操作

演示

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的颜色组合数量，而不仅仅是奇数和偶数

: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){ ... }