Mengapa Pemilih Anak Ke-9 Saya Menggunakan Gaya pada Semua Elemen Daripada Hanya Satu?

Mengapa Pemilih Kanak-Kanak Tidak Berfungsi?

Pemilih anak ke-n ialah alat yang berkuasa untuk menyasarkan elemen tertentu dalam kumpulan adik-beradik. Walau bagaimanapun, adalah penting untuk memahami batasannya untuk menggunakannya dengan berkesan.

Isu: Semua Ikon Sosial Muncul Sama

Pertimbangkan situasi berikut di mana anak ke-n digunakan untuk menambah imej latar belakang pada ikon sosial:

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

Gelagat yang dijangkakan: Hanya ikon sosial yang pertama harus mempunyai imej latar belakang LinkedIn.
Tingkah laku sebenar: Semua ikon mempunyai imej latar belakang yang sama.

Sebab: Mengira Adik Beradik Bukan Elemen

Pemilih anak ke-n mengira bilangan adik-beradik elemen yang disasarkan, bukan elemen itu sendiri. Dalam kod di atas, ia mengira bilangan elemen anak div #social-links.

Dalam kes ini, elemen div.social-logo sentiasa wujud sebagai anak div tunggal bagi elemen anchor. Oleh itu, nth-child sentiasa mengembalikan 1, bermakna setiap elemen menerima imej latar belakang yang sama.

Penyelesaian: Sasaran Adik Beradik Elemen Ibu Bapa

Untuk menyasarkan div.sosial tertentu -elemen logo, kita perlu mengubah suai pemilih untuk menyasarkan adik-beradik elemen anchor induk:

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

Dengan menyasarkan elemen anchor ke-n, kami kini memilih elemen div.social-logo yang dimaksudkan dengan betul dan menggunakan imej latar belakang sewajarnya.

Atas ialah kandungan terperinci Mengapa Pemilih Anak Ke-9 Saya Menggunakan Gaya pada Semua Elemen Daripada Hanya Satu?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!