使 css nth-child() 只影响可见答案

【问题标题】：Make css nth-child() only affect visible使 css nth-child() 只影响可见
【发布时间】：2011-10-01 13:20:45
【问题描述】：

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

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

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

如果我使用隐藏某些行的$('select some tr:s').hide()，我会得到奇数和偶数样式的混合，但都是混杂的。

【问题讨论】：

【解决方案1】：

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

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

在我的情况下，背景设置破坏了我的悬停，这已通过!important 解决，以使悬停背景保持不变。

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

【讨论】：

在生产环境中使用 !important 并不是一个好习惯。如果你最终使用 !important，这意味着解决方案可能有点复杂，但它存在。在这种情况下，您希望使用 jquery 应用类，以便在没有 !important 的情况下仍然能够悬停：codepen.io/gfra/pen/nFrEc
有时在使用外部库时，您别无选择，只能使用“！important”

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

你可以这样做：

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

希望对你有帮助

【讨论】：