Mengapa Pemilih anak ke-2 Saya Tidak Bekerja pada Ikon Sosial?

Pemilih anak ke-nth Tidak Berfungsi: Mengapa dan Cara Membetulkan

Pemilih anak ke-nth ialah alat yang berkuasa untuk memilih elemen berdasarkan kedudukan mereka dalam elemen induk. Walau bagaimanapun, kadangkala boleh mengelirukan mengapa pemilih tidak berfungsi seperti yang diharapkan.

Dalam kes kod yang disediakan, pemilih anak ke-n digunakan untuk menggunakan imej latar belakang yang berbeza pada ikon sosial dalam #social- pautan div. Walaupun keadaan anak ke-n, semua ikon kelihatan sama. Isu ini berpunca daripada salah faham tentang cara pemilih berfungsi.

Cara nth-child Berfungsi

Pemilih anak ke-n mengira adik beradik—elemen yang berkongsi elemen induk yang sama. Dalam HTML yang disediakan, setiap logo div.social ialah satu-satunya anak teg anchornya. Oleh itu, pemilih anak ke-n hanya mengira satu elemen, tanpa mengira nilai yang ditentukan.

Walau bagaimanapun, teg anchor dalam #social-links adalah adik beradik antara satu sama lain. Akibatnya, pemilih anak ke-n secara berkesan boleh menyasarkan tag anchor individu menggunakan sintaks berikut:

<code class="css">#social-links a:nth-child(1) div
#social-links a:nth-child(2) div
#social-links a:nth-child(3) div</code>

Dengan menyasarkan tag anchor dan bukannya elemen anak div, pemilih anak ke-n kini boleh membezakan antara ikon sosial.

Penyelesaian

Untuk menyelesaikan isu ini, gantikan pengisytiharan anak ke-n asal dengan yang berikut:

<code class="css">#social-links a:nth-child(1) div {
    background-image: url(...);
}

#social-links a:nth-child(2) div {
    background-image: url(...);
}

#social-links a:nth-child(3) div {
    background-image: url(...);
}</code>

Dengan menyasarkan tag , pemilih anak ke-n dengan betul akan menggunakan imej latar belakang yang berbeza pada setiap ikon sosial seperti yang dimaksudkan.

Atas ialah kandungan terperinci Mengapa Pemilih anak ke-2 Saya Tidak Bekerja pada Ikon Sosial?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!