偶数tr的LESS（CSS）选择器没有类.hide

Question

我正在研究可折叠的表格。我试图更改偶数tr的背景，但我不计算隐藏的tr，它们有.hide类。

问题：假设我通过应用

有两个隐藏的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

Answer 2

这就是我在类似情况下所做的。 nth-of-type仅适用于不同的标签名称。

HTML

<div class="table">
   <div class="row">...</row>
   <aside><div class="row">...</row></aside>
   <div class="row">...</row>
   <div class="row">...</row>
</div>

CSS

.table {display:table}
aside {display:none;}
.table .row:nth-of-type(odd) { background: pink; }