Mengapa `:first-child` Tidak Memilih H1 Saya?

Mengapa :first-child Tidak Memilih H1 yang Dijangka

Dalam senario yang dibentangkan, matlamatnya adalah untuk mewarnakan elemen h1 pertama dalam div dengan detail_container kelas biru. CSS yang digunakan (:first-child) mengandaikan bahawa elemen yang disasarkan ialah anak pertama ibu bapanya, tetapi dalam kes ini, anak pertama ibu bapa ialah elemen ul.

Pemahaman :first-child

Pemilih :first-child memilih elemen anak pertama bagi elemen induk tertentu yang sepadan dengan kriteria yang ditentukan. Dalam kod yang disediakan, kriterianya ialah "h1", tetapi kerana anak pertama div ialah ul, pemilih :first-child tidak digunakan pada elemen h1.

Penggunaan Penyelesaian Alternatif :first-of-type

CSS3 memperkenalkan pemilih :first-of-type, yang memilih kejadian pertama jenis elemen dalam ibu bapa. Dalam senario ini, menggantikan :first-child dengan :first-of-type akan menyelesaikan isu:

.detail_container h1:first-of-type {
  color: blue;
}

Pertimbangan Keserasian Penyemak Imbas

Walau bagaimanapun, :first- of-type mempunyai keserasian pelayar terhad berbanding dengan :first-child.

Disyorkan Penyelesaian Menggunakan Kelas

Penyelesaian yang lebih praktikal dan serasi silang penyemak imbas adalah dengan menetapkan kelas kepada elemen h1 yang disasarkan dan menggayakannya dengan sewajarnya :

.detail_container h1.first {
  color: blue;
}

Atas ialah kandungan terperinci Mengapa `:first-child` Tidak Memilih H1 Saya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!