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

我有一個<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元件，並且元件的未知總數。（該列表是數據驅動的，而不是靜態的）。

我真的不想做任何的：

運行JavaScript的每一個過濾器控制被觸摸時，只是重新上色的顯示列表項。
隱藏時完全刪除元素。這使得重新添加它不平凡（afaict）。

來源

2012-12-09 Spencer Williams

你不能那樣做。這不是'：not（）'和'：nth-child（）'僞類的工作方式。 – BoltClock

你可以扭轉，並刪除了'：not'部分，並宣佈一些規則僅適用於'.hidden'覆蓋這些規則。 – 11684

在我的iPhone上看起來很完美。所以也許這是瀏覽器特定的。你正在使用哪種瀏覽器？ – 11684

除了將元素移除爲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 */ }

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

來源

2012-12-09 09:24:30

比我執行相同的解決方案 –

，如果你不介意鑽研jQuery的..

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

將刪除它，這樣你的CSS深淺交替。

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

我會建議使用此，而不是將「隱藏」你要隱藏的元素的類。

來源

2012-12-09 09:07:50

您可以用'node.parentNode.removeChild（節點）;'在沒有jQuery的:) –

同樣的效果，我可以做到這一點，但隨後重新添加元素將是不平凡的 –

不幸的是，我認爲這是我的只有希望......但我會先睡上一覺。 –

如果你知道會有的.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會中斷。

來源

2012-12-09 09:14:37

是的，我知道這是醜陋的。 :) –

有趣的解決方案，但不幸的是，名單是數據驅動的，所以有'的任意數量的.hidden'元素 –

一個可能的解決方案：

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

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

來源

2012-12-09 09:26:09

英雄所見的更強大的略同。 :) –

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

回答

相關問題