CSS伪类排序：nth-​​child和：not

Question

我有以下代码：

<ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

我用灰色条纹设置了这个列表：

.list li:nth-child(2n) {
    background-color: #ccc;
}

效果很好，但后来我隐藏了一些li元素并且条纹的顺序中断了。 Fiddle

我尝试使用:not()更新选择器：

.list li:not(.hidden):nth-child(2n) {
    background-color: #ccc;
}

但这没用。

有人可以建议如何订购伪类以保持条纹顺序吗？

Answer 1

AFAIK，nth-child处理元素位置或索引。因此，即使隐藏元素，其他元素位置/索引也不会改变。

我认为你在这里更好的选择是使用jQuery完全做到这一点，如下所示，只是一个例子：

$(function () {
    $('.list li:not(.hidden):odd').addClass('paint');
    $('.hide_some').click(function () {
        $('.list li').eq(0).addClass('hidden');
        $('.list li').eq(2).addClass('hidden');
        $('.list li').eq(5).addClass('hidden');
        // again remove the paint
        $('.list li').removeClass('paint');
        // again add new paint
        $('.list li:not(".hidden"):odd').addClass('paint');
    })
})

Working Fiddle