Css着色表问题

Question

我一直在努力制作一张彩色的桌子,其中的行数与奇数行的颜色不同.我唯一的问题是我必须能够使用隐藏的行来执行它,因为例如,如果你隐藏第2行,那么你会看到第1行和第3行的颜色相同.

这就是我所拥有的:

tr:not([display="none"]):nth-child(even){
    background: #EFEFFF;
}
tr:not([display="none"]):nth-child(odd){
    background: #E0E0FF;
}

此代码对我不起作用,因为浏览器不会根据给定的顺序过滤:not和:nth-child.有什么建议？

Answer 1

你可以在可见行中添加一个类,这样就可以把它写成:

tr.visible:nth-child(even) {
    background: #EFEFFF;
}
tr.visible:nth-child(odd){
    background: #E0E0FF;
}

然后使用jquery添加/删除类,因为您使行可见/不可见？

@OverZealous你的expample不起作用,因为在w3网站上看到,'nth-child'适用于兄弟元素组,而不是选择器匹配元素组.我认为唯一的解决方案是在javascript代码中手动着色元素. (7认同)
@Gonzalo是对的,你的解决方案不起作用.尝试在上面的jsfiddle链接中将第一个列表项的类从'.visible'更改为'.hidden'(第2行和第4行具有相同的颜色,尽管您希望它们根据您的逻辑而有所不同).:nth-child甚至不考虑标记名称,您可以将其视为标记类型[any].:nth-of-type修复了标记名称.新的(尚未实现的):第n个匹配(选择器列表的+ + b)通常可以解决所有选择器的问题,因此可以应用于.visible类的变通方法. (4认同)