Mengapakah Pemilih `anak ke-1` Saya Tidak Berfungsi Seperti Yang Dijangkakan?

Mengapa ke-nth-child tidak berfungsi dengan betul?

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!