过滤掉列表项后，css nth-child（2n + 1）重新绘制css
我有20多个项目的清单。 使用：nth-child（2n + 1）选择器更改背景颜色。 （即偶数项目黑色，奇数项目白色）。 当我单击一个按钮以使用jQuery Isotope插件过滤掉特定项目时，它会将一个.isotope-hidden类添加到我想要过滤的项目中，这会将列表项目的位置更改为0,0，将不透明度更改为0。
发生这种情况时，剩余的项目将保留原始的黑色/白色背景颜色，现在不再有序。
有没有人知道在不包含.isotope-hidden类的项目上使用：nth-child（2n + 1）选择器“重新绘制”css的方法。
我试过了
#element tr:not(.isotope-hidden):nth-child(2n+1) 无济于事。
任何帮助，将不胜感激。 谢谢。
使用过滤后的组选择时，Nth-child可能违反直觉。
使用.each（）来克服它的局限性：
var count = 1; $('#element tr:not(.isotope-hidden)').each(function(){ if ( count++ % 2 == 1 ) $(this).css('background-color','white') })
CSS选择器 – 特别是伪类，特别是:not()和:nth-*()系列伪类 – 不能用作“filter”; 这里有一点解释，虽然回想起来似乎有点尴尬。 这是一个更好的解释。
序列中的简单选择器不按照它们逐个写入的顺序处理; 相反，它们是元素必须匹配的一组条件，以便将样式应用于它，并且元素必须一起匹配所有这些条件。 或者不是调用它们条件你也可以称它们为描述符 ，但我会认为“filter”在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中父项的第二个子项，依此类推。
如果您需要顺序filter，则无法使用纯CSS选择器执行此操作; 你必须使用为此目的而设计的jQueryfilter方法 ，将一个类添加到各个元素中，然后可以使用这些元素来应用样式：
$('#element tr').not('.isotope-hidden').filter(':even');
顺便说一句，这也可以使用其filter选择器重写为单个jQuery选择器 ：
$('#element tr:not(.isotope-hidden):even');
但是，尽管语法相似，但真正的CSS选择器和jQueryfilter之间存在巨大差异， 本答案中对此进行了概述。