Question

假设我有一个表，其行可以动态分配.hidden个类。具有该类的行通过CSS隐藏。行也采用交替颜色设置，如下所示：

tr:nth-child(even) {
    background-color: $light-grey;
}

但是，我希望每个偶数 unhidden 行都有阴影。因此，在应用:nth-child(even)时，不计算隐藏的行，并且模式显示一致。以下是我的直接尝试，但它并没有做我所希望的。

tr:not(.hidden):nth-child(even) {
    background-color: $light-grey;
}

:nth-child()只是指行＆＃39;原始索引，而不是tr:not(.hidden)的当前选择范围。这两个只是通过＆＃39;过滤彼此重叠。

CSS中是否有:nth-of-scope/selection()（或简称:nth()）元类？有没有等效或替代方法？

或者我必须使用Javascript吗？

（我应该说我也可以使用jQuery）

Answer 1

在纯CSS中无法做到这一点，因为添加display:none或visibility:none不会从DOM中删除元素，这就是CSS使用的内容。

因此，您需要添加一些JavaScript（在页面加载后运行），like so

var trs = document.getElementsByTagName("tr"), // Select whichever ones you need
    count = 0; // Counter for the non-hidden ones

for(var i = 0; i < trs.length; i++) {    
    if(!trs[i].classList.contains("hidden") && (count++)%2 == 0) { // Odd ones
        trs[i].style.background = "black";
    } else if(!trs[i].classList.contains("hidden")) { // Even ones
        trs[i].style.background = "lightgrey";
    }
}

Answer 2

不确定纯CSS是否可行。使用display:none;和visibility:hidden;项目仍然存在于DOM中，因此表格背景颜色显示不正确。您可以使用JQuery remove()来实现此功能您可以在js.fiddle here上看到我的简单示例

Answer 3

结果使用jQuery比任何类型的CSS hack都简单得多：

rows = $('table tbody tr');
rows.find('tr:visible:odd').css('background-color', '#f7f7f7');

并指定偶数和奇数的样式：

rows.find('tr:visible').each(function(i) {
    if (i%2) {
        $(this).css('background', '#f7f7f7');
    } else {
        $(this).css('background', 'none');
    };
});

我知道，我已经回答了自己的问题 - 我应该明确表示我可以使用jQuery！

我只是希望:visible和:even快点进入CSS标准。

Answer 4

我只是设法解决这个问题，只需添加一个额外的<tr>元素和display: none;设置（在我的情况下通过CSS，但可以使用样式属性），当一个隐藏的行块有奇数个元素。这不符合每个用例，但对于您使用多行创建扩展表的情况，它可以很好地工作。

Answer 5

纯 CSS （无JS ）解决方案：

诀窍是隐藏具有不同标记的行，而不是类。 “ul / li”标签必须去。在我的例子中，我使用“del”标签来隐藏。

.list div:nth-of-type(odd) { background: ghostwhite; }
.list del { display: none; }

<div class="list">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <del>4</del>
  <div>5</div>
  <del>6</del>
  <div>7</div>
</div>

斑马条纹忽略隐藏的元素

5 个答案: