Bolehkah CSS Menyasarkan Elemen anak ke-1 Merentas Berbilang Ibu Bapa?

Menyasarkan anak ke-nth Merentas Berbilang Ibu Bapa dalam CSS: Enigma Tidak Terpecahkan

Dalam bidang CSS, keupayaan untuk memilih elemen anak tertentu dalam ibu bapa telah lama menjadi ruji bagi pereka web. Walau bagaimanapun, apabila menyasarkan elemen anak ke-n merentas berbilang ibu bapa, laluan menjadi sarat dengan kerumitan.

Pertimbangkan senario berikut: anda mempunyai bekas div.foo dengan berbilang elemen ul, setiap satu mengandungi satu set barang li. Anda ingin menggunakan penggayaan secara khusus pada elemen li pertama dan ketiga merentas semua ul dalam div.foo.

Pada pandangan pertama, CSS berikut mungkin kelihatan seperti penyelesaian yang mudah:

.foo li:nth-child(1),
.foo li:nth-child(3)
{
    color:red;
}

Walau bagaimanapun, pendekatan ini gagal disebabkan oleh had yang wujud bagi pemilih :nth-child() CSS. Ia hanya boleh menyasarkan elemen kanak-kanak dalam ibu bapa terdekat yang sama. Oleh itu, CSS di atas hanya akan menggayakan anak pertama setiap ul, menghasilkan hasil yang tidak diingini berikut: http://jsfiddle.net/hTfVu/

Untuk mencapai hasil yang diingini, pemilih CSS sahaja tidak mencukupi. Pustaka JavaScript seperti jQuery menyediakan penyelesaian yang mudah:

$('.foo li:eq(0), .foo li:eq(2)')

Kod ini memilih elemen li pertama dan ketiga dalam setiap ul yang terkandung dalam div.foo.

Sebagai alternatif, anda boleh menandakan secara eksplisit elemen li pertama dan ketiga menggunakan kelas atau ID dan kemudian menyasarkannya melalui CSS dengan sewajarnya. Walau bagaimanapun, pendekatan ini memerlukan pengubahsuaian pada struktur HTML, yang mungkin tidak selalu dapat dilaksanakan.

Kesimpulannya, menyasarkan elemen anak ke-nth merentas berbilang ibu bapa kekal sebagai enigma yang tidak dapat diselesaikan dalam keupayaan asli CSS. Namun, dengan menerima pustaka JavaScript atau menggunakan penanda HTML eksplisit, batasan ini boleh diatasi, membolehkan penggayaan yang tepat dan bernuansa merentas struktur dokumen yang kompleks.

Atas ialah kandungan terperinci Bolehkah CSS Menyasarkan Elemen anak ke-1 Merentas Berbilang Ibu Bapa?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!