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

Question

我有一个 <div> 的列表秒。每个<div>有课zebra .到目前为止，我使用以下方法对列表进行 strip 化:

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

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

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

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

这是一个 fiddle我正在描述的内容。

更新:

• 有一个未知数 .hidden元素，以及未知的元素总数。 (列表是数据驱动的，而不是静态的)。

我真的宁愿不做任何:

1. 每次触摸过滤器控件时都运行 javascript，只是为了重新着色显示的列表项。
2. 完全删除隐藏的元素。这使得重新添加它变得非常重要(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 .