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

Perbezaan Halus Antara :anak pertama dan :first-of-type

Memahami nuansa antara :first-child and :first -of-type boleh menjadi penting dalam penggayaan CSS. Walaupun pemilih bunyinya serupa, kedua-dua ini menghasilkan hasil yang berbeza.

Hubungan Ibu Bapa-Anak: Pandangan Lebih Dekat

Setiap elemen dalam elemen induk boleh mempunyai berbilang elemen anak . Di kalangan kanak-kanak ini, hanya seorang yang boleh menuntut perbezaan sebagai anak pertama. Sifat eksklusif ini ditangkap oleh :anak pertama:

<div class="parent">
  <div>Child</div> <!-- :first-child -->
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div>

Kuasa :first-of-type

Di mana :first-child fokus pada mengenal pasti anak pertama, :first-of-type mempunyai tujuan yang lebih khusus: ia menyasarkan elemen pertama jenis tertentu, tanpa mengira penempatannya sebagai kanak-kanak. Pertimbangkan senario di mana jenis yang dimaksudkan ialah div:

<div class="parent">
  <div>Child</div> <!-- div:first-child, div:first-of-type -->
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div>

Dalam contoh ini, kedua-dua :first-of-type dan :first-of-type mengenal pasti elemen yang sama kerana ia adalah kedua-dua anak pertama dan yang pertama div. Walau bagaimanapun, jika kita memperkenalkan elemen h1 sebagai anak pertama:

<div class="parent">
  <h1 id="Child">Child</h1> <!-- h1:first-child, h1:first-of-type -->
  <div>Child</div> <!-- div:nth-child(2), div:first-of-type -->
  <div>Child</div>
  <div>Child</div>
</div>

H1, disebabkan status anak pertamanya, memenuhi keperluan :anak pertama. Walau bagaimanapun, ia bukan lagi div pertama. Akibatnya, div pertama menjadi padanan :first-of-type untuk div.

Key Takeaway

:first-child pinpoints the first child, while :first- of-type menempatkan elemen pertama bagi jenis tertentu, tanpa mengira kedudukannya sebagai kanak-kanak. Perbezaan ini penting apabila menyasarkan elemen tertentu berdasarkan urutan kelahiran dan jenis yang wujud.

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