CSS3中的交替行颜色随着DOM的变化而变化

Question

我正在使用以下css来替换li元素的背景颜色，但是如果行获得分配给它们的.hidden类，则需要维护css（.h​​idden类是display：none;）。

ul li:not(.hidden):nth-child(odd) {
    background: #fff;
}

ul li:not(.hidden):nth-child(even) {
    background: #f4f4f4;
}

如何在向/从ul添加/删除li元素的同时保持交替颜色的任何想法？如果可能，请仅提供基于CSS的解决方案。我可能不得不在JS中这样做但不愿意！

干杯

Answer 1

由于:not()伪类的工作方式，您无法使用它来过滤DOM中的元素以获取要应用样式的元素子集。有关详细信息，请参阅this answer。

编辑：显然我的解决方案不应该也能正常工作。我需要休息一下才能回答问题。所以我想唯一可行的途径可能就是使用JavaScript来做到这一点。我在这里保留这篇文章而不是删除，因为我不想用它来评论。

为此，如果您可以修改HTML，则可以改为使用所有li共有的类，并将其作为目标与:nth-of-type()结合使用：< /秒>

ul li.shown:nth-of-type(odd) {
    background: #fff;
}

ul li.shown:nth-of-type(even) {
    background: #f4f4f4;
}

Answer 2

如果您将.hidden更改为以下

，该怎么办？

.hidden {height:0px; overflow:hidden}

我根本没有测试过这段代码，但是元素仍然会在DOM中进行操作，但用户不应该看到。