Apakah Perbezaan Antara Pemilih CSS `:first-child` dan `:first-of-type`?

Menjelaskan Perbezaan antara :anak pertama dan :jenis pertama

Walaupun definisinya kelihatan serupa, :anak pertama dan :jenis pertama berbeza dengan ketara dalam kriteria pemilihan mereka. Untuk mencapai pemahaman yang menyeluruh, mari kita terokai nuansa yang membezakannya.

Anak Pertama vs. Jenis Pertama

:anak pertama mengenal pasti unsur pertama bagi sebarang jenis dalam elemen induknya . Sebaliknya, :first-of-type secara khusus menyasarkan elemen pertama jenisnya sendiri dalam elemen induknya.

Pertimbangkan coretan HTML berikut:

<div class="parent">
  <div>Child 1</div>
  <div>Child 2</div>
  <p>Paragraph</p>
</div>

Dalam contoh ini, pemilih '.induk > div:first-child' akan memadankan elemen dengan teks "Child 1" kerana ia adalah anak pertama elemen '.parent'. Sementara itu, pemilih '.parent > div:first-of-type' juga akan sepadan dengan "Child 1" kerana ia merupakan elemen pertama jenis 'div' dalam induk.

Implikasi Perbezaan

:first- child mengutamakan susunan kanak-kanak dalam elemen induk, manakala :first-of-type memfokuskan pada jenis elemen tanpa mengira kedudukannya dalam kalangan adik-beradiknya. Perbezaan ini boleh mempunyai kesan dalam senario di mana elemen anak tergolong dalam jenis yang berbeza.

Jika anak pertama dalam contoh kami digantikan dengan elemen 'h1', pemilihan :anak pertama masih akan menyasarkannya. Walau bagaimanapun, :first-of-type kini akan sepadan dengan elemen 'div' pertama, secara berkesan melangkau 'h1' kerana jenisnya yang berbeza.

Ringkasan

Untuk meringkaskan, :first-child mewakili anak pertama tanpa mengira jenis, manakala :first-of-type khusus menyasarkan elemen pertama jenis tertentu. Perbezaan ini membolehkan lebih fleksibiliti dan ketepatan dalam memilih elemen HTML berdasarkan kedudukan dan jenisnya dalam elemen induk.

Atas ialah kandungan terperinci Apakah Perbezaan Antara Pemilih CSS `:first-child` dan `:first-of-type`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!