使css nth-child（）只影响可见 [英] Make css nth-child() only affect visible

问题描述

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

Is there a way to only affect visible elements with this css?

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

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

如果我使用 $ ：s'）。hide（）隐藏了一些行，我得到一个混合奇怪和均匀的样式，但所有在一个mixup。

If i use a $('select some tr:s').hide() that hides some of the rows i get a mix of odd and even styling but all in a mixup.

推荐答案

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

I ended up using the solution Rodaine suggested in his comment, after the show/hide i do this:

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

在我的例子中，背景的设置打破了我的悬停，这是用 ！important 让悬停背景粘贴。

In my case the setting of background broke my hover, this was solved with !important to make the hover background stick.

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

这篇关于使css nth-child（）只影响可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！