Mengapa `:first-child` Tidak Memilih `` Pertama dalam ``?

Tafsiran Salah Pemilih CSS

Apabila cuba menggayakan

elemen dalam

dengan nama kelas detail_container, anda mungkin menghadapi hasil yang tidak dijangka. Isu ini timbul kerana salah faham tentang cara pemilih :first-child beroperasi.

CSS yang anda laksanakan sedang cuba memilih

elemen yang juga merupakan anak pertama bagi detail_container

. Walau bagaimanapun, jika elemen pertama dalam

ialah

, pemilih :anak pertama tidak akan sepadan dengan

, walaupun ia adalah

dalam

.

Penggunaan Pemilih CSS yang Betul

Untuk memilih

elemen, tanpa mengira kedudukannya dalam detail_container

, anda harus menggunakan pemilih :first-of-type. Pemilih ini akan memilih

elemen yang merupakan anak langsung kepada elemen induk yang ditentukan.

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

Sebagai alternatif, untuk keserasian penyemak imbas yang lebih baik, anda boleh menetapkan kelas kepada

dan sasarkan kelas tersebut dalam CSS anda.

.detail_container h1.first {
  color: blue;
}

Dengan memahami nuansa pemilih CSS, anda boleh memastikan peraturan penggayaan anda menyasarkan elemen yang dikehendaki dengan tepat.