Mengapa Pemilih :first-child Saya Tidak Berfungsi pada Elemen h1 Saya?

:Pemilih anak pertama Tidak Memilih Elemen Yang Diingini

Apabila cuba memilih elemen h1 pertama dalam div dengan nama kelas " detail_container," sesetengah pengguna mungkin menghadapi tingkah laku yang tidak dijangka. Peraturan CSS yang dimaksudkan, ".detail_container h1:first-child," gagal apabila elemen h1 bukan anak pertama langsung bagi div.

Isu ini timbul kerana pemilih :first-child terpakai pada yang pertama anak langsung unsur induknya. Dalam contoh yang disediakan, apabila elemen h1 mengikuti senarai ul, anak pertama div detail_container ialah ul, bukan h1. Akibatnya, pemilih :first-child tidak sepadan dengan h1.

Untuk menangani perkara ini, pertimbangkan untuk menggunakan pemilih :first-of-type. Pemilih ini sepadan dengan elemen pertama bagi jenis tertentu dalam induknya, tidak kira sama ada ia merupakan anak pertama yang terdekat. Peraturan CSS berikut akan memilih elemen h1 pertama dalam div:

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

Walau bagaimanapun, disebabkan oleh pengehadan keserasian penyemak imbas, adalah disyorkan untuk menggunakan kelas yang ditetapkan untuk elemen h1 pertama dan menyasarkan kelas itu sebaliknya:

.detail_container h1.first {
    color: blue;
}

Atas ialah kandungan terperinci Mengapa Pemilih :first-child Saya Tidak Berfungsi pada Elemen h1 Saya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!