jquery - 甚至 tr 的 LESS (CSS) 选择器，没有 class .hide

Question

我正在研究可折叠的 table 。我正在尝试更改甚至 tr 的背景，但我不计算具有 .hide 类的隐藏 tr。

问题:假设我通过应用

有两个隐藏的 tr

:nth-of-type(even) // even = 2
{
  background: #F5F5F5;
}

改变每个偶数 tr 的背景。这会导致两个可见的 tr 具有相同的颜色。虽然我需要剥离功能。我不希望此选择器应用于那些隐藏的 tr 类 .hide。这样就不会出现具有相同背景的两次调整 tr。如屏幕截图所示。

Fiddle with Issue

我试过跟随但没有成功。

tr:not(.hide)
{
    &:nth-of-type(even)
    {
      background: #F5F5F5;
    }
}

Answer 1

你不能在纯 CSS 中做到这一点。

解决了迭代表和动态添加奇数/偶数 css 规则到每一行的类似问题。

假设这个选项卡

<table id="theTab">
  <tr><td>row 1</td></tr>
  <tr class="hidden"><td>row 2</td></tr>
  <tr><td>row 3</td></tr>
  <tr><td>row 4</td></tr>
</table>

用下面的JS

var classToggle = false;

$("#theTab tr:not(.hidden)").each(function(){
    $(this).addClass(classToggle ? "odd" : "even");
    classToggle = !classToggle;
});

这是一个基于 JQuery 的解决方案，但工作正常并且不需要任何表修改(您可以使用任何东西代替 .hidden 类选择器..)

DEMO here