销毁或重新计算CSS的nth-child选择器

Question

背景:

我有一个列表，使用jQuery动态地隐藏和显示某些列表项，计算第三和第四个列表项以应用特定的类。 问题:

使用nth-child选择器的CSS样式（来自样式表）将被应用于每个第三个列表项。问题是，当我动态隐藏/显示列表项时，CSS nth-child选择器似乎没有重新计算。

由于jQuery已经计算了第三个列表项，所以除非没有取消或销毁它的方法，否则我不需要重新计算CSS nth-child选择器。

代码:

标记:

<ul class="teamlist">
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
</ul>

jQuery：

$('.teamlist li:visible').each(function (i) {
    if (i % 3 == 0) $(this).addClass('teamlist_fourth_item');
});
$('.teamlist li:visible').each(function (i) {
   if ((i+1) % 3 == 0) $(this).addClass('teamlist_third_item');
});

不需要的CSS：

.teamlist li:nth-child(3n+3) {
    margin-right: 0;
}

问题:

如何销毁或强制重新计算CSS nth-child选择器？

- Clarus Dignus

---

我会使用JavaScript将nth-child类应用为函数，这样可以在IE8及更低版本下工作，并且每次运行代码以添加或删除列表项时都会重新计算。 - user934902

nth-child 不会对隐藏元素产生影响，因此除非您添加或删除 DOM 节点，否则 CSS 不会突然更改匹配的元素。 - zzzzBov

@Danko - 删除代码（而不是销毁或覆盖它）需要我编辑一个父WordPress主题（这将无法在升级后保留）。我希望找到一种快速的方法来抵消不需要的样式，而不是删除它。 - Clarus Dignus

谢谢，我现在更清楚了。我猜你对所有的li元素设置了默认的margin-right。你能写一个新的CSS规则吗？ - DaniP

@MattGibson - 请看我之前对Danko的评论。问题更多地与第三个列表项没有动态计算有关，而不是级联不需要的样式的能力。 - Clarus Dignus

Answer 1

根据评论，我认为您需要重写该类，使其与所有 li 元素的属性相等。您可以创建一个匹配这些元素具有更好特异性的自己的类，例如使用父级 ul 的 id 或 class：

#parent .teamlist li:nth-child(3n+3) {
    margin-right:2%;
}

或者在您的 ul 上使用 id。

<ul class="teamlist" id="lista">

#lista.teamlist li:nth-child(3n+3) {
    margin-right:2%;
}

_{同时确保你的CSS在其他CSS之后加载}

你也可以使用Jquery，并使用相同的CSS选择器来进行修改：

$('.teamlist li:nth-child(3n+3)').css('margin-right','2%');

- DaniP

---

太棒了，谢谢！我平衡了nth-child样式，并允许jQuery处理第三个列表项的计算。当我之前尝试时，我的选择器没有更高的特异性，因此被覆盖了。 - Clarus Dignus