我試圖將類應用於以第4(3n + 4)開頭的每3個列表項。 當所有列表項都可見時,這可以正常使用CSS。CSS - 將類添加到3n + 4'可見'列表項
不幸的是,當某些列表項被隱藏(display:none)時,第n個子選擇器也適用於那些隱藏的列表項。
我需要的CSS只適用於可見列表項目,所以我做了一些研究,並嘗試使用jQuery和可見選擇器來實現所需的結果。這也沒有用。
請看我下面的代碼爲例。
任何幫助將不勝感激。 謝謝
http://codepen.io/anon/pen/xuqwf
HTML
<ul>
<li>1</li>
<li style="display: none;">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li style="display: none;">6</li>
<li>7</li>
<li>8</li>
</ul>
CSS
ul li {
background: yellow;
border: 1px orange solid;
margin: 5px;
}
ul li:nth-child(3n+4) {
background: green;
}
.clear {
background: red;
}
的jQuery(嘗試和失敗)
$('ul li:visible:nth-child(3n+4)').addClass('clear');
您的jQuery [工作正常(http://jsfiddle.net/oGeez/VQ337/1/) - 做什麼你的意思是失敗? – George
而不是使用內聯樣式,你應該使用一個類,然後只能使用CSS –
@oGeez - 我不認爲它確實... http://jsfiddle.net/VQ337/3/ – Adam