css - :nth-child combined with :not strange behavior

Question

Hej乡亲们，

我被 CSS 和 :nth-child 和 :not 选择器困住了。

情况:
我有一个搜索字段，结果显示在下面。进入网站时，所有结果均已显示。为了更好地阅读，每个第二个结果行都会获得突出显示颜色 :nth-child(odd)

目标:
当用户在搜索栏中输入值时，我想隐藏(而不是删除!)所有无效行。通过添加 __inivisible 类，它可以很好地工作。它只是将 display 属性设置为 none。

问题:
添加类 __invisible 后，:nth-child 选择器将无法按预期工作。我将其与 :not(.__invisible) 选择器结合起来，以排除所有不相关和不可见的结果。因此他仍然数着它们。

可能有点难理解，这里举一个jsfiddle的例子:http://jsfiddle.net/SHGp2/3/

我希望 2 个粉红色的行应该是他必须决定是奇数还是偶数的唯一行，所以一个应该是粉红色的，一个应该是蓝色的。

如果您不明白我在说什么，请禁用 __invisible 类中的注释。您将看到两行粉红色，而不是一粉红色和一蓝色。

也许我的 :nth-child 选择器的功能是错误的，如果是这样，有没有办法让这个东西与纯CSS一起工作？

提前致谢! :)

附注 这个 fiddle 中没有 JS ;)

Answer 1

nth-chlid 计算父级的子级，无论它们是否可见，或者是否应用了任何其他条件。不幸的是，无法执行您在此处尝试的操作，因为即使 nth-of-type 也只能比较标签名称。

最好的选择是在过滤掉行后将其完全删除。我建议克隆该表，然后您可以在需要恢复原始完整表时克隆此"template"。