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

Question

内容：

我有一个清单。使用jQuery，我可以动态地...

1. ...隐藏/显示某些列表项。
2. ...计算第三和第四列表项以应用特定的类。

问题：

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

由于jQuery已经在计算第三个列表项，因此我不需要重新计算CSS的第n个子选择器，除非没有办法取消它或将其销毁。

代码：

标记：

<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选择器？

Answer 1

在评论之后，我认为您需要的是覆盖该类，使其与所有li元素的属性相等，您可以创建自己的类，以更好的特异性匹配这些元素，例如与父级的id或classul:

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

或者在您的 ID 上ul

<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%');