Mengapakah pemilih anak ke-n saya tidak berfungsi pada elemen bersarang?

Mengapa Pemilih nth-child Tidak Berfungsi?

Anda mungkin mengalami isu ini semasa menggunakan pemilih anak ke-n untuk tujuan penggayaan. Walaupun menggunakan pemilih ini untuk menambah imej latar belakang pada ikon sosial yang berbeza, anda dapati bahawa semua ikon memaparkan rupa yang sama. Ini menandakan ada sesuatu yang tidak kena dalam kod anda.

Menyelidiki Isu

Pemilih anak ke-n direka bentuk untuk menyasarkan elemen tertentu berdasarkan kedudukannya di kalangan unsur adik beradik. Walau bagaimanapun, dalam kod anda, pemilih:

#social-links div:nth-child(1),
#social-links div:nth-child(2),
#social-links div:nth-child(3),
#social-links div:nth-child(4),

menyasarkan elemen div yang merupakan anak kepada elemen #social-links. Walau bagaimanapun, elemen div ini sentiasa merupakan anak tunggal bagi elemen anchor (a) masing-masing. Oleh itu, pemilih anak ke-n tidak dapat membezakan antara mereka kerana mereka semua adalah anak pertama dan satu-satunya elemen utama mereka.

Pendekatan yang Betul

Untuk membetulkan isu ini, anda perlu melaraskan pemilih anak ke-n untuk menyasarkan elemen utama dan bukannya elemen div. Dengan berbuat demikian, anda boleh menentukan elemen penambat yang harus menerima imej latar belakang tertentu:

#social-links a:nth-child(1) div { 
   background-image: url('path/to/image1.svg'); 
}
#social-links a:nth-child(2) div { 
   background-image: url('path/to/image2.svg'); 
}
#social-links a:nth-child(3) div { 
   background-image: url('path/to/image3.svg'); 
}
#social-links a:nth-child(4) div { 
   background-image: url('path/to/image4.svg'); 
}

Struktur kod yang diubah suai ini memastikan setiap elemen penambat menerima imej latar belakang yang dimaksudkan berdasarkan kedudukannya di antara elemen penambat adik beradik.

Atas ialah kandungan terperinci Mengapakah pemilih anak ke-n saya tidak berfungsi pada elemen bersarang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!