仅用CSS实现表格行动态显隐时的交替背景更新问题

你的问题核心是:nth-of-type(even/odd)是基于DOM结构中元素的原始位置计数，不会过滤掉带.hidden的行——哪怕这些行被隐藏，计数依然包含它们，最终导致显示的行颜色无法正确交替。

可行的纯CSS方案 #

使用CSS Selectors Level 4新增的:nth-child(An+B of <selector-list>)语法，这个语法允许你指定计数的元素范围，只统计符合条件的行：

/* 针对显示的行，偶数行设置白色背景 */
.report tbody tr:not(.hidden):nth-child(even of tr:not(.hidden)) {
    background-color: #ffffff; /* 替换为你的$white变量实际值 */
}

/* 针对显示的行，奇数行设置红色背景 */
.report tbody tr:not(.hidden):nth-child(odd of tr:not(.hidden)) {
    background-color: red;
}

这个语法会先筛选出所有tr:not(.hidden)的行，再在这个范围内计算奇偶位置，完全忽略被隐藏的行，从而实现动态隐藏/显示行后，剩余显示的行依然保持正确的交替背景色。

浏览器兼容性 #

该特性支持现代主流浏览器：

• Chrome 111+
• Firefox 113+
• Safari 16.4+

如果需要兼容更旧的浏览器，纯CSS方案无法实现，此时才需要借助JavaScript动态为显示的行添加奇偶类来控制背景色。

内容的提问来源于stack exchange，提问作者Malvinka