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

Posted 2023-03-05

【中文标题】销毁或重新计算 CSS nth-child 选择器

【英文标题】：Destroy or recalculate CSS nth-child selector

【发布时间】：2013-12-18 15:23:57

【问题描述】：

上下文：

我有一个清单。使用 jQuery，我是动态的...

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

问题：

使用第 n 个子选择器的 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 选择器？

【问题讨论】：

我会使用 javascript 将 nth-child 类作为一个函数应用，这样它就可以工作到 IE8，然后每次运行代码来添加或删除它会重新计算的列表项跨度>

nth-child 不会因隐藏元素而改变，因此除非您添加或删除 DOM 节点，否则 CSS 不会突然改变匹配的元素。

简单的答案是破坏 CSS ...所以只需将其从文件中删除 真正的问题是什么？

@Danko - 删除代码（而不是销毁或覆盖它）需要我编辑一个父 WordPress 主题（升级后无法使用）。我希望找到一种快速的方法来对抗不受欢迎的样式而不删除它。

谢谢我更清楚，我猜你对所有 li 元素都有一个默认的边距，你能写一个新的 css 规则吗？

【参考方案1】：

在 cmets 之后，我认为您需要重写该类以使其与所有 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 在另一个之后加载}

您也可以使用 Jquery 并使用相同的 CSS 选择器对其进行修改：

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

【讨论】：

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