如何使 :nth-child 選擇器忽略隱藏元素？-css教學-PHP中文網

如何使 :nth-child 選擇器忽略隱藏元素？

Patricia Arquette

發布： 2024-11-18 19:57:02

原創

371 人瀏覽過

How Can I Make the :nth-child Selector Ignore Hidden Elements?

如何讓第n 個子選擇器忽略隱藏元素

問題：

問題：

在CSS中， :nth-child() 選擇器在其計算中對隱藏元素進行計數。使用 display: none 隱藏元素時，這可能會導致中斷。

解決方案：

要排除隱藏元素，我們需要將它們從 DOM 中完全刪除。這是一個基於CSS 的解決方案和一個基於jQuery 的解決方案：

.hidden {
    display: none !important;
}

登入後複製

CSS 解決方案：

!important 聲明會覆蓋display: none 規則並完全刪除頁面佈局中的元素。

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

登入後複製

jQuery解決方案：

remove() 方法從DOM 中物理移除隱藏元素，確保它們不會被:nth-child() 選擇器計算在內。

範例：

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

登入後複製

考慮以下HTML結構：

使用nth-child(2n) 選擇器，將定位第二個項目。但是，如果我們使用 display: none 隱藏第二個項目，它仍然會被選擇器計算在內。透過使用提供的 CSS 或 jQuery 解決方案，隱藏元素將不再被第 n 個考慮 - child() 選擇器，達到預期的效果。

以上是如何使 :nth-child 選擇器忽略隱藏元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！