Mengapakah `:first-child` Gagal Memilih `` Pertama dalam Elemen Bersarang dan Bagaimana Saya Boleh Membetulkannya?

:anak pertama Gagal Memadankan Elemen yang Dijangka dalam Kes Tertentu

Apabila cuba memilih elemen h1 pertama dalam div dengan kelas "detail_container," pemilih :first-child mungkin tidak berfungsi seperti yang dimaksudkan. Ini berlaku apabila h1 bukan anak terdekat div, seperti dalam contoh berikut:

<style type="text/css">
.detail_container h1:first-child {
  color: blue;
} 
</style>

<div class="detail_container">
  <ul>
    <li>
    <li>
  </ul>
  <h1 id="First-H">First H1</h1>
  <h1 id="Second-H">Second H1</h1>
</div>

Dalam kes ini, pemilih :first-child gagal untuk memilih h1 pertama kerana elemen ul ialah anak pertama div, bukan h1.

Cara Menyelesaikan Isu

Untuk memilih elemen h1 pertama tanpa mengira kedudukannya dalam div, terdapat pemilih CSS alternatif yang tersedia:

1. :first-of-type

Pemilih :first-of-type memilih anak pertama induknya yang sepadan dengan jenis elemen tertentu. Dalam kes ini, ia akan memilih anak h1 pertama div, seperti berikut:

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

2. Pemilihan Berasaskan Kelas

Pendekatan lain ialah memberikan kelas unik kepada h1 pertama, seperti "first", dan kemudian menyasarkan kelas tersebut dalam CSS:

.detail_container h1.first {
  color: blue;
}

Ini kaedah memberikan lebih fleksibiliti dan kawalan ke atas pemilihan.

Atas ialah kandungan terperinci Mengapakah `:first-child` Gagal Memilih `` Pertama dalam Elemen Bersarang dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!