Question

我有一个左侧浮动的项目列表，右边距为20px。每4个项目没有右边距，因此，列表项目排列为4列。我是通过使用列表项的CSS nth-child(4n)选择器

来做到这一点的

这一切都很好，花花公子，然后我决定通过jquery同位素插件应用过滤，这有点搞砸了。每第4个项目仍然没有右边距，但这适用于列表中的每个项目。

我需要做的是找出屏幕上的第4个孩子，并应用CSS规则。我确信这可能是由其他一些java完成的。

如果显示任何代码，CSS HTML或jQuery，将会有所帮助，请告诉我。任何帮助将不胜感激。

Answer 1

使用Jquery的方法只评估:visible元素然后应用sytle，如下所示：

$(document).ready(function(){
    $('div:visible').each(function (i) {
      if ((i+1) % 4 == 0) $(this).css('marginRight','0');
    });
})

您只需更改选择器并将其放在所需的正确处理程序中即可。

Answer 2

这比听起来更难。

nth-child和nth-of-type选择器无法区分元素是否可见，甚至无法通过检查其他选择器来区分（例如，您无法通过查看类名来实现）。

使用nth-child(4n)，您将始终获得所选父项的子项的第四/第八/等元素;除了类型（nth-of-type）之外，没有办法进一步过滤它。

使用nth-of-type(4n)是相同的，但是按所选元素的元素类型进行过滤。（例如，如果您选择div，则nth-of-type(4n)将为您提供集合中的第4个/第8个/等div个元素，忽略任何span等。< / p>

有a CSS4 selector, nth-match()可以做你正在寻找的东西，但不幸的是它在任何浏览器中都不受支持，并且看起来不太可能很快。

那么我们如何在现有浏览器中做你想做的事呢？

简单的选择是从DOM中删除隐藏的元素，而不是简单地隐藏它们。然后，您现有的nth-child()选择器才能正常工作。当然，如果您需要将它们切换进去，这并不理想，但这是一种选择。
使用Javascript而不是CSS来选择元素。当您更改任何可见元素的可见性时，可能会在（4n）可见元素上切换类名或其他内容。
寻找实现nth-match()选择器的polyfill库。