我怎樣才能選擇其他沒有特定類別的元素？

Question

我有一個<div> s的列表。每個<div>有類zebra。到現在爲止我用下面來分拆名單：

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

現在我實現過濾功能，使得一些<div> S的將有一類hidden。我試圖更新我的CSS來

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

但是沒有效果。我錯過了什麼？如何組合這些選擇器，以便在:nth-child(2n)中只考慮顯示.zebra<div>？

這是我所描述的fiddle。

UPDATE：

• 有一個未知的數.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。

placemarker.parentNode.replaceChild(placemarker.firstChild); 

見this static example：

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

取消隱藏元素然後可以完成。

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; 
} 

等。如果有兩個以上的隱藏項目，此特定example會中斷。

Answer 4

一個可能的解決方案：

使用jQuery改變.hidden元素的類型，比方說，<li>。使用:nth-of-type代替:nth-child。

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