CSS第n个孩子（2N + 1）筛选出列表项目后重绘CSS(css nth-child(2n+1)

我有20+项的列表。第n个孩子（2N + 1）选择器：使用的背景颜色的变化。（即连项目黑色，奇数项白色）。当我点击一个按钮来过滤掉使用jQuery同位素具体项目插件增加了一个.isotope隐藏类我想筛选出的项目，这会改变列表项的为0,0比0的位置和透明度。

发生这种情况时剩余的项目只剩下原来的黑/白背景的颜色，这是现在不再是为了。

有谁知道一个方法来“重绘”使用的CSS：第n个孩子（2N + 1）选择在不包含.isotope隐藏类的项目。

我试过了

#element tr:not(.isotope-hidden):nth-child(2n+1)

有没有用。

任何帮助，将不胜感激。谢谢。

Answer 1:

与一组筛选的选择工作时，第n个孩子可能是违反直觉的。

使用。每（）来解决它的局限性：

var count = 1;
$('#element tr:not(.isotope-hidden)').each(function(){
    if ( count++ % 2 == 1 ) $(this).css('background-color','white')
})

Answer 2:

CSS选择-尤其是伪类，特别是:not()和:nth-*()伪类的家庭-不为“过滤器”工作; 有一点的解释在这里，虽然回想起来有点别扭。这里有一个更好的解释。

在一个序列中简单选择在它们通过一个写入一个的顺序不被处理; 相反，它们是一组元素必须为了样式应用到与之相匹配的条件，而元素必须所有这些条件，因为他们，搭配在一起 。或代替称他们的条件 ，你也可以打电话给他们的描述 ，但是当涉及到CSS选择，我会考虑“过滤器”名不副实。

您的选择是指：

当且仅当它位于内选择此元素#element和所有这些条件相匹配：
这是一个tr元素
它不具有类isotope-hidden
它是（2N + 1）个其父的孩子

这并不意味着：

看里面的内容#element
选择所有tr元素
筛选出不具有类元素isotope-hidden这些元素中
应用样式到每一个（2N + 1）个孩子，这些过滤元件之间

即使你能“重画”或过滤出来后重新应用样式，它不会反正工作。这是因为无论是否元素的isotope-hidden类（甚至它是否是一个tr ！），则:not(.isotope-hidden)选择是不会改变的事实，一个元素是:nth-child(1)是其在DOM父，即一个元件的第一个子:nth-child(2)是其在DOM父的第二个孩子，等等。

如果你需要连续的过滤器，你将无法用纯CSS选择器来做到这一点; 你将不得不使用jQuery的过滤方法，是专为实现这个目的，一类添加到相应的元素，你就可以使用应用您的样式：

$('#element tr').not('.isotope-hidden').filter(':even');

顺便说一句，这也可以被重写为单个jQuery选择，使用其过滤器选择器：

$('#element tr:not(.isotope-hidden):even');

然而，尽管类似的语法，有真正的CSS选择器和jQuery的过滤器，这是在概述之间的巨大差异这个答案。