Rumah > Artikel > hujung hadapan web > Mengapa Pemilih Anak Ke-9 Saya Menggunakan Gaya pada Semua Elemen Daripada Hanya Satu?
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.
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.
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.
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!