Mengapakah `:first-child` Gagal Memilih `` Pertama dalam Elemen Bersarang dan Bagaimana Saya Boleh Membetulkannya?-tutorial css-php.cn

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

Barbara Streisand

Lepaskan： 2024-12-09 10:12:08

asal

1055 orang telah melayarinya

Why Does `:first-child` Fail to Select the First `` in Nested Elements, and How Can I Fix It?

: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>
<body>
<div class="detail_container">
  <ul>
    <li></li>
    <li></li>
  </ul>
  <h1>First H1</h1>
  <h1>Second H1</h1>
</div>
</body>

Salin selepas log masuk

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;
}

Salin selepas log masuk

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;
}

Salin selepas log masuk

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!