1

我有一个<div>s 列表。每个<div>都有类zebra。到目前为止，我已经使用以下内容对列表进行了条带化​​：

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

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

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

但这没有任何效果。我错过了什么？如何组合这些选择器，以便.zebra <div>在:nth-child(2n)?

这是我所描述的一个小提琴。

更新：

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

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

  1. 每次触摸过滤器控件时运行一个javascript，只是为了重新着色显示的列表项。
  2. 隐藏时完全删除元素。这使得重新添加它变得不简单（afact）。
4

4 回答 4

1

您可以用不同标签的元素替换它，而不是像Justin 建议的那样删除元素。我们可以使用，例如：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);

请参阅此静态示例。

于 2012-12-09T09:24:30.287 回答
0

如果你不介意钻研 jquery ..

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

将删除它，以便您的 css 阴影交替出现。

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

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

于 2012-12-09T09:07:50.770 回答
0

如果您知道项目数量有限.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 个隐藏项，则此特定示例会中断。​</p>

于 2012-12-09T09:14:37.127 回答
0

一种可能的解决方案：

使用 jQuery 将.hidden元素的类型更改为<li>. 使用:nth-of-type而不是:nth-child.

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

于 2012-12-09T09:26:09.953 回答