我正在研究可折叠的 table 。我正在尝试更改甚至 tr
的背景,但我不计算具有 .hide 类的隐藏 tr。
问题:假设我通过应用
有两个隐藏的tr
:nth-of-type(even) // even = 2
{
background: #F5F5F5;
}
改变每个偶数 tr
的背景。这会导致两个可见的 tr
具有相同的颜色。虽然我需要剥离功能。我不希望此选择器应用于那些隐藏的 tr
类 .hide
。这样就不会出现具有相同背景的两次调整 tr
。如屏幕截图所示。
我试过跟随但没有成功。
tr:not(.hide)
{
&:nth-of-type(even)
{
background: #F5F5F5;
}
}
最佳答案
你不能在纯 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 类选择器..)
关于jquery - 甚至 tr 的 LESS (CSS) 选择器,没有 class .hide,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25842985/