Bagaimanakah Saya Boleh Membuat Pemilih :nth-child Abaikan Elemen Tersembunyi?

Cara Membuat Pemilih nth-child Abaikan Elemen Tersembunyi

Isu:

Dalam CSS , pemilih :nth-child() mengira elemen tersembunyi dalam pengiraannya. Ini boleh menyebabkan gangguan apabila menyembunyikan elemen menggunakan paparan: tiada.

Penyelesaian:

Untuk mengecualikan elemen tersembunyi, kita perlu mengalih keluar elemen tersebut daripada DOM sama sekali. Berikut ialah penyelesaian berasaskan CSS dan penyelesaian berasaskan jQuery:

Penyelesaian CSS:

.hidden {
    display: none !important;
}

Pengisytiharan !penting mengatasi paparan: tiada peraturan dan mengalih keluar sepenuhnya elemen daripada reka letak halaman.

Penyelesaian jQuery:

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

Kaedah remove() secara fizikal mengalih keluar elemen tersembunyi daripada DOM, memastikan ia tidak dikira oleh pemilih :nth-child().

Contoh:

Pertimbangkan struktur HTML berikut:

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

Menggunakan nth- child(2n), item kedua akan disasarkan. Walau bagaimanapun, jika kita menyembunyikan item kedua menggunakan paparan: tiada, ia masih akan dikira oleh pemilih.

Dengan menggunakan sama ada penyelesaian CSS atau jQuery yang disediakan, elemen tersembunyi tidak akan lagi dipertimbangkan oleh nth- pemilih child(), menghasilkan kesan yang diingini.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Pemilih :nth-child Abaikan Elemen Tersembunyi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!