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元素和条纹的顺序.小提琴

我尝试用以下方法更新选择器: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');
    })
})

工作小提琴