css nth-child(2n+1) 过滤掉列表项后重绘css答案

【问题标题】：css nth-child(2n+1) repaint css after filtering out list itemscss nth-child(2n+1) 过滤掉列表项后重绘css
【发布时间】：2012-07-25 13:02:06
【问题描述】：

我有一个包含 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)

无济于事。

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

【问题讨论】：

精简代码或 jsfiddle 怎么样？
我遇到了同样的问题...这对我有用：Solution

标签： jquery css filter css-selectors jquery-isotope

【解决方案1】：

在处理组的过滤选择时，Nth-child 可能会违反直觉。

使用 .each() 来绕过它的限制：

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

【讨论】：

【解决方案2】：

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

序列中的简单选择器不会按照它们的写入顺序进行处理一个接一个；相反，它们是元素必须匹配的一组条件才能应用样式，并且元素必须按原样匹配所有这些条件，一起。或者，除了将它们称为 conditions，您还可以将它们称为 descriptors，但对于 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's filter methods 为相应的元素添加一个类，然后您可以使用该类来应用您的样式：

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

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

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

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

【讨论】：