:nth-child 结合 :not 奇怪的行为

Question

Hej 伙计们，

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

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

目标：
当用户在搜索栏中输入值时，我想要隐藏（而不是删除！）所有无效行。通过添加类__inivisible，它工作得很好。它只是将display 属性设置为none。

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

也许它有点难以理解，所以这里是一个 jsfiddle 示例：http://jsfiddle.net/SHGp2/3/

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

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

也许我把:nth-child选择器的功能弄错了，如果是这样，有没有办法让这个东西使用纯CSS？

提前致谢！ :)

附： 这个小提琴中没有 JS ;)

Answer 1

nth-chlid 计算父级的子级，无论它们是否可见，或者是否应用了任何其他条件。不幸的是，这里没有办法做你正在尝试的事情，因为即使nth-of-type 也只能比较标签名称。

您最好的选择是在过滤掉行时完全删除它们。我建议克隆表，然后您可以在需要恢复原始完整表时克隆此“模板”。