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