让css nth-child()只影响可见

Question

有没有办法用这个CSS只影响可见元素？

table.grid tr.alt:nth-child(odd)
{
    background:#ebeff4;
}

table.grid tr.alt:nth-child(even)
{
    background:#ffffff;
}

如果我使用隐藏某些行的

$('select some tr:s').hide()

，我会得到奇数和偶数样式的混合，但全部混合在一起。

Answer 1

我最终使用了罗丹在他的评论中建议的解决方案，在显示/隐藏之后我这样做：

$('.alt:visible:odd').css('background', '#EBEFF4');
$('.alt:visible:even').css('background', '#FFFFFF');

在我的例子中，背景的设置破坏了我的悬停，这是通过

!important

解决的，以使悬停背景粘住。

table.grid tr.hover:hover
{
    cursor:pointer;
    background:#D2E0E9 !important;    
}

Answer 2

现代浏览器支持 CSS 选择器级别 4 语法，如下所示：

:nth-child(2n of .visible){
    ...
}

仅采用具有

visible

类的偶数元素。

更多信息：

Answer 3

另一种选择是在隐藏其他元素时将类应用于可见元素。将 nth-child 应用于此类（仅应用于可见元素。）

在这种情况下，您不必使用 !important 标签来保留悬停背景。

Answer 4

你可以这样做：

$('some_selector tr:visible').hide()

希望这有帮助