LESS (CSS) 选择器，用于非类 .hide 的甚至 tr答案

【问题标题】：LESS (CSS) selector for even tr with not class .hideLESS (CSS) 选择器，用于非类 .hide 的甚至 tr
【发布时间】：2014-09-15 16:57:56
【问题描述】：

我正在制作可折叠的表格。我正在尝试更改 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;
    }
}

【问题讨论】：

尝试将 nth-of-type(even) 改为 nth-of-type(2n)
Zebra striping a table with hidden rows using CSS3?的可能重复
@MarioAraque 这并没有解决我的问题
您愿意更改标记吗？我知道一个纯 css 解决方案，但您不能将 tr 用于行。
@AamirShahzad 你能发一个fiddle吗？

标签： jquery html css css-selectors less

【解决方案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

【讨论】：

【解决方案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; }

【讨论】：

然后用JS分配奇偶行类