<分区>
我发现了一些使用 Javascript 来改变颜色的方法，但我可以在我的表格/数据网格中隐藏一些元素，但是使用这个 CSS，背景色不能正确交替:
CSS
.grid tr:not(.display-none):nth-child(2n+1) > td {
background: red;
}
.display-none * {
display: none;
}
HTML
<table class="grid">
<tr><td>nono1</td></tr>
<tr><td>nono2</td></tr>
<tr><td>nono3</td></tr>
<tr><td>nono4</td></tr>
<tr class="display-none"><td>nono5</td></tr>
<tr><td>nono6</td></tr>
<tr><td>nono7</td></tr>
<tr><td>nono8</td></tr>
</table>
查看实时示例
最佳答案
那么试试
<table class="grid">
<tr class="parent"><td>nono1</td></tr>
<tr class="parent"><td>nono2</td></tr>
<tr class="parent"><td>nono3</td></tr>
<tr class="parent"><td>nono4</td></tr>
<tr class="display-none"><td>nono5</td></tr>
<tr class="parent"><td>nono6</td></tr>
<tr class="parent"><td>nono7</td></tr>
<tr class="parent"><td>nono8</td></tr>
</table>
.parent:nth-child(odd) {
background-color: #fff;
}
.parent:nth-child(even) {
background-color: red;
}
/* after the first non-.parent, toggle colors */
tr:not(.parent) ~ .parent:nth-child(odd) {
background-color: red;
}
tr:not(.parent) ~ .parent:nth-child(even) {
background-color: #fff;
}
/* after the second non-.parent, toggle again */
tr:not(.parent) ~ tr:not(.parent) ~ .parent:nth-child(odd) {
background-color: #fff;
}
tr:not(.parent) ~ tr:not(.parent) ~ .parent:nth-child(even) {
background-color: red;
}
.display-none * {
display: none;
}
关于html - 具有替代背景颜色和隐藏元素的 CSS 表格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20252052/