Rumah > hujung hadapan web > tutorial css > Apakah Perbezaan Antara Pemilih `:first-child` dan `:first-of-type` CSS?

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

Susan Sarandon
Lepaskan: 2024-12-19 09:29:11
asal
810 orang telah melayarinya

What's the Difference Between CSS's `:first-child` and `:first-of-type` Selectors?

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:

1

2

3

4

5

6

<div class="parent">

  <div>Child</div> <!-- :first-child -->

  <div>Child</div>

  <div>Child</div>

  <div>Child</div>

</div>

Salin selepas log masuk

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:

1

2

3

4

5

6

<div class="parent">

  <div>Child</div> <!-- div:first-child, div:first-of-type -->

  <div>Child</div>

  <div>Child</div>

  <div>Child</div>

</div>

Salin selepas log masuk

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:

1

2

3

4

5

6

<div class="parent">

  <h1>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>

Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan