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

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 一起工作？

提前致谢! :)

附言这个 fiddle 里没有 JS ;)

Answer 1

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

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