Rumah > Artikel > hujung hadapan web > Mengapakah Pemilih `anak ke-1` Saya Tidak Berfungsi Seperti Yang Dijangkakan?
Pemilih ke-nth-child ialah alat berkuasa dalam CSS yang membolehkan anda untuk menggayakan elemen berdasarkan kedudukannya dalam elemen induk. Walau bagaimanapun, kadangkala anda mungkin menghadapi isu di mana pemilih anak ke-n nampaknya tidak berfungsi dengan betul.
Salah satu sebab yang paling biasa untuk perkara ini ialah anda mungkin cuba menggunakan pemilih anak ke-n untuk pilih elemen yang bukan adik-beradik. Pemilih anak ke-n mengira adik-beradik, yang bermaksud bahawa ia hanya mempertimbangkan unsur-unsur yang mempunyai unsur induk yang sama.
Sebagai contoh, dalam kod HTML berikut, elemen div.social-logo ialah semua anak kepada a elemen, jadi pemilih nth-child tidak akan berfungsi seperti yang dijangkakan:
<code class="html"><div id="social-links"> <a href=""><div class="social-logo"></div></a> <a href=""><div class="social-logo"></div></a> <a href=""><div class="social-logo"></div></a> <a href=""><div class="social-logo"></div></a> </div></code>
Untuk membetulkannya, anda perlu menggunakan pemilih nth-child untuk memilih elemen a dan bukannya elemen div.social-logo . Sebagai contoh, kod CSS berikut akan menggayakan elemen pertama dalam div #social-links:
<code class="css">#social-links a:nth-child(1) { background-color: red; }</code>
Sebab lain mengapa pemilih anak ke-n mungkin tidak berfungsi dengan betul ialah anda mungkin menggunakan sintaks yang salah. Sintaks yang betul untuk pemilih anak ke-n ialah:
nth-child(n)
Di mana n ialah kedudukan elemen yang anda ingin pilih. Sebagai contoh, nth-child(1) akan memilih elemen pertama, nth-child(2) akan memilih elemen kedua dan seterusnya.
Jika anda menggunakan sintaks yang salah, pemilih nth-child tidak akan berfungsi dengan baik. Contohnya, kod CSS berikut tidak akan berfungsi:
<code class="css">#social-links div:nth-child[1] { background-color: red; }</code>
Kod ini tidak betul kerana pemilih anak ke-n tidak boleh digunakan dengan kurungan segi empat sama. Sebaliknya, anda harus menggunakan kurungan.
Dengan mengikuti petua ini, anda boleh memastikan bahawa pemilih anak ke-n berfungsi dengan betul dalam kod CSS anda.
Atas ialah kandungan terperinci Mengapakah Pemilih `anak ke-1` Saya Tidak Berfungsi Seperti Yang Dijangkakan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!