Mengapa Ikon Sosial Saya Menggunakan Pemilih `anak-anak` Semua Sama?

Memahami Pemilih anak ke-n

Apabila cuba menggunakan imej latar belakang yang unik pada ikon sosial yang berbeza menggunakan pemilih anak ke-n, anda mungkin menghadapi masalah apabila semua ikon muncul yang sama. Artikel ini akan menyelidiki punca masalah ini dan menyediakan penyelesaian.

Pemilih anak ke-n direka bentuk untuk memilih elemen berdasarkan kedudukan mereka dalam kalangan adik-beradik mereka, iaitu elemen yang berkongsi elemen induk yang sama. Walau bagaimanapun, dalam struktur HTML yang disediakan, setiap div.social-logo ialah satu-satunya anak bagi elemen yang sepadan dengannya. Ini bermakna nth-child hanya mempunyai satu elemen untuk dikira sebagai anak, tanpa mengira bilangan div dalam bekas #social-links.

Untuk menyelesaikan isu ini, anda boleh menyasarkan elemen utama yang mengandungi ikon sosial menggunakan nth-child. Dalam struktur HTML ini, terdapat berbilang elemen utama yang kesemuanya adalah adik beradik antara satu sama lain. Oleh itu, anda boleh menggunakan pemilih anak ke-n untuk menyasarkan elemen penambat tertentu dan menggunakan imej latar belakang yang unik dengan sewajarnya.

Berikut ialah contoh kod CSS yang diperbetulkan:

<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>

Pendekatan yang disemak ini memastikan setiap elemen utama disasarkan oleh pemilih anak ke-n, membolehkan anda menggunakan imej latar belakang yang unik pada setiap ikon sosial dengan berkesan.

Atas ialah kandungan terperinci Mengapa Ikon Sosial Saya Menggunakan Pemilih `anak-anak` Semua Sama?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!