CSS 伪类排序 :nth-child 和 :not [重复]答案

【问题标题】：CSS pseudo classes ordering :nth-child and :not [duplicate]CSS 伪类排序 :nth-child 和 :not [重复]
【发布时间】：2014-08-01 04:20:01
【问题描述】：

我有以下代码：

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

但这没用。

谁能建议如何订购伪类以保持条纹顺序？

【问题讨论】：

你能删除那些元素而不是隐藏吗？ fiddle
:nth-child() 不考虑任何其他选择器。添加类等时，孩子的顺序不会改变。
@Mr_Green，不，我以后需要它们，隐藏是暂时的。
@BoltClock 你有这方面的资料吗？
@feeela：是的，很多，但我无法使用站点搜索找到其中的任何一个，去算一下。 spec 对此也不是很清楚。但是，当我说这就是它的工作原理时，我可以权威地说。也许我应该回答这个问题，尽管它是无数次重复。

标签： css css-selectors pseudo-class

【解决方案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

【讨论】：

是的，谢谢，看起来没有办法用纯 css 管理它