Rumah > hujung hadapan web > tutorial css > Bagaimanakah Saya Boleh Memilih Elemen Ke-N Tanpa Mengetahui Induknya?

Bagaimanakah Saya Boleh Memilih Elemen Ke-N Tanpa Mengetahui Induknya?

Mary-Kate Olsen
Lepaskan: 2024-12-15 09:19:14
asal
257 orang telah melayarinya

How Can I Select the Nth Element Without Knowing Its Parent?

Memilih Anak ke-n Tanpa Pengetahuan Elemen Ibu Bapa

Apabila bekerja dengan kod dinamik, mungkin sukar untuk memilih elemen ke-n apabila elemen induk tidak diketahui. Walau bagaimanapun, ini boleh dicapai menggunakan pemilih CSS seperti :first-child dan :nth-child().

:first-child and :nth-child()

Pemilih ini membenarkan anda memilih elemen berdasarkan kedudukannya dalam elemen induknya. Contohnya, :first-child memilih elemen anak pertama, manakala :nth-child(2) memilih elemen anak kedua.

Kenapa :first, :last, :nth Do Not Exist

Tidak seperti :first-child dan :nth-child(), pemilih seperti :first, :last, dan :nth tidak wujud kerana tiada perbezaan antara elemen menjadi elemen pertama, terakhir atau ke-n dalam keseluruhan dokumen. Setiap elemen ialah anak kepada elemen lain, kecuali unsur akar.

Contoh

Untuk memilih perenggan kedua dalam contoh berikut, gunakan pemilih berikut:

<youdontknowwhat!>
  <p class="select-me">One</p>
  <p class="select-me">Two</p>
</youdontknowwhat!>
Salin selepas log masuk
.select-me:nth-child(2)
Salin selepas log masuk

Pemilih ini akan memilih elemen .select-me yang kedua tanpa mengira elemen induknya.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memilih Elemen Ke-N Tanpa Mengetahui Induknya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan