查找伪 nth-child 以应用 CSS 更改答案

【问题标题】：Finding a pseudo nth-child to apply CSS changes查找伪 nth-child 以应用 CSS 更改
【发布时间】：2014-01-28 16:18:51
【问题描述】：

我有一个以 20px 右边距向左浮动的项目列表。每个第 4 项没有右边距，因此，列表项排成 4 列。我通过使用 CSS nth-child(4n) 选择器来完成此操作

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

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

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

【问题讨论】：

【解决方案1】：

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

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

您只需要更改您的选择器并将其放置在您想要的正确处理程序中。

【讨论】：

这似乎工作......几乎。通过同位素过滤器切换时，添加的那个类会保持不变。如果有任何帮助，请访问以下网站：joebuteradesign.com
@NWTech 如果您检查代码，您可以看到每个图像都有一个绝对位置，这个问题并不能满足您的需求......然后边距与空格无关。正如您看到的那样，答案有效，您将值边距设为 0，但在位置上您无法做到这一点
@NWTech 运行同位素功能时可能需要包含此代码
我认为您的解决方案可能会起作用，如果有办法在单击过滤器按钮时删除 margin-right:0;。
FWIW，我的 <li> 项目有一类“项目”。当我尝试您的建议时，我将div:visible 替换为.projects:visible，但我注意到margin-right:0; 应用于每4 个项目，无论它是否可见......也许这是因为在页面加载时，每个项目都会显示，并且在切换过滤器时，边距不会重置？

【解决方案2】：

这比听起来要难。

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

使用nth-child(4n)，您将始终获得作为所选父项的子项的第四个/第八个/等元素；除了按类型 (nth-of-type) 之外，没有办法对其进行进一步过滤。

使用nth-of-type(4n) 是一样的，只是根据被选元素的元素类型进行过滤。（例如，如果您选择div，那么nth-of-type(4n) 将给您集合中的第4/8/等div 元素，忽略任何spans 等）。

a CSS4 selector, nth-match() 可以满足您的需求，但不幸的是，目前尚不支持任何浏览器，而且看起来不太可能很快支持。

那么我们怎样才能在现有浏览器中做你想做的事呢？

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

【讨论】：