Question

我有<div>的列表。每个<div>都有zebra个班级。到目前为止，我已使用以下内容对列表进行条带化：

.zebra:nth-child(2n) { /* colors */ }

现在我正在实施一个过滤功能，这样其中一些<div>会有一个类hidden。我尝试将我的CSS更新为

.zebra:not(.hidden):nth-child(2n) { /* colors */ }

但这没有效果。我错过了什么？如何合并这些选择器，以便只在.zebra中考虑显示<div> :nth-child(2n)？

这是我所描述的fiddle。

更新：

存在未知数量的.hidden元素，以及未知的元素总数。（该列表是数据驱动的，而不是静态的。）

我真的不愿意做任何事情：

每次触摸过滤器控件时都运行一个javascript，只是为显示列表项重新着色。
在隐藏元素时完全删除它。这使得重新添加它是非平凡的（afaict）。

Answer 1

您可以将其替换为不同标记的元素，而不是将该元素删除为Justin suggested。我们可以使用details，例如：

var placemarker = document.createElement("details"); node.parentNode.replaceChild(placemarker, node); placemarker.appendChild(node);

然后，不要使用:nth-child，而是使用:nth-of-type。

details { display:none; } div.zebra:nth-of-type(2n) { /* colors */ }

然后可以通过以下方式取消隐藏元素：

placemarker.parentNode.replaceChild(placemarker.firstChild);

请参阅this static example。

Answer 2

如果你不介意钻研jquery ..

$('#yourHiddenElement').remove();

将删除它，以便你的css阴影交替。

http://jsfiddle.net/NYvcv/1/

我建议使用它而不是将“隐藏”类应用于要隐藏的元素。

Answer 3

如果您知道.hidden项目的数量有限，您可以这样做：

.zebra2:nth-child(2n) {
    background: lightgrey;
}

.zebra2.hidden ~ .zebra2:nth-child(2n) {
    background: inherit;
}
.zebra2.hidden ~ .zebra2:nth-child(2n+1) {
    background: lightgrey;
}

.zebra2.hidden ~ .zebra2.hidden ~ .zebra2:nth-child(2n) {
    background: lightgrey;
}
.zebra2.hidden ~ .zebra2.hidden ~ .zebra2:nth-child(2n+1) {
    background: inherit;
}

等等。如果有超过2个隐藏项，则此特定example会中断。

Answer 4

一种可能的解决方案：

使用jQuery将.hidden元素的类型更改为<li>。使用:nth-of-type代替:nth-child。

http://jsfiddle.net/Nb68T/1/

如何选择没有特定类的所有其他元素？

4 个答案: