Question

我有20多个项目的清单。使用：nth-child（2n + 1）选择器更改背景颜色。（即偶数项目黑色，奇数项目白色）。当我单击一个按钮以使用jQuery Isotope插件过滤掉特定项目时，它会将一个.isotope-hidden类添加到我想要过滤的项目中，这会将列表项目的位置更改为0,0，将不透明度更改为0。 / p>

当发生这种情况时，其余的项目将保留原始的黑/白背景颜色，现在不再有序。

有没有人知道在不包含.isotope-hidden类的项目上使用：nth-child（2n + 1）选择器“重新绘制”css的方法。

我试过

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

无济于事。

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

Answer 1

使用过滤后的群组选择时，Nth-child可能违反直觉。

使用.each（）来克服其局限性：

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

Answer 2

CSS选择器 - 特别是伪类，特别是:not()和:nth-*()伪类系列 - 不能用作“过滤器”;有一点解释here，虽然回想起来似乎有点尴尬。这是一个更好的解释。

序列中的简单选择器不会按照它们逐个的顺序处理;相反，它们是一组元素必须匹配才能将样式应用于它，并且元素必须符合所有这些条件，在一起。或者不是将它们称为条件，你也可以将它们称为 descriptors ，但我会认为“过滤器”在CSS选择器方面用词不当。

您的选择器意味着：


当且仅当该元素位于#element内且符合所有这些条件时才选择此元素：


这是tr元素

它没有班级isotope-hidden

是其父母的第（2n + 1）个孩子


这并不意味着：



查看#element
的内容
选择所有tr元素

过滤掉这些元素中没有类isotope-hidden的元素

将样式应用于这些已过滤元素中的每个（第2n + 1）个孩子


即使您可以在重新过滤后重新应用或重新应用样式，但无论如何都无法正常工作。这是因为isotope-hidden类的元素（或者它是否是tr！），:not(.isotope-hidden)选择器是否不会改变一个元素is :nth-child(1)是DOM中父项的第一个子项，:nth-child(2)元素是DOM中父项的第二个子项，依此类推。

如果您需要顺序过滤器，则无法使用纯CSS选择器执行此操作;您必须使用为此目的而设计的jQuery's filter methods，才能将类添加到相应的元素中，然后您可以使用这些元素来应用样式：

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

顺便说一句，这也可以使用filter selectors重写为单个jQuery选择器：

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

然而，尽管语法相似，但真正的CSS选择器和jQuery过滤器之间存在巨大的差异，这在this answer中有所概述。

过滤掉列表项后，css nth-child（2n + 1）重新绘制css

2 个答案: