如何使 :nth-child 选择器忽略隐藏元素？

如何让第 n 个子选择器忽略隐藏元素

问题：

在 CSS 中， :nth-child() 选择器在其计算中对隐藏元素进行计数。使用 display: none 隐藏元素时，这可能会导致中断。

解决方案：

要排除隐藏元素，我们需要将它们从 DOM 中完全删除。这是一个基于 CSS 的解决方案和一个基于 jQuery 的解决方案：

CSS 解决方案：

.hidden {
    display: none !important;
}

!important 声明会覆盖 display: none 规则并完全删除页面布局中的元素。

jQuery 解决方案：

$('.hidden').remove();

remove() 方法从 DOM 中物理删除隐藏元素，确保它们不会由 :nth-child() 选择器计数。

示例：

考虑以下 HTML 结构：

<div class="container">
  <div class="item"></div>
  <div class="item hidden"></div>
  <div class="item"></div>
</div>

使用第 n- child(2n) 选择器，第二个项目将成为目标。但是，如果我们使用 display: none 隐藏第二个项目，它仍然会被选择器计算在内。

通过使用提供的 CSS 或 jQuery 解决方案，隐藏元素将不再被第 n 个考虑 - child() 选择器，达到预期的效果。

以上是如何使 :nth-child 选择器忽略隐藏元素？的详细内容。更多信息请关注PHP中文网其他相关文章！