Rumah > hujung hadapan web > tutorial css > Mengapa Pemilih :first-child Saya Tidak Berfungsi pada Elemen h1 Saya?

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

DDD
Lepaskan: 2024-12-10 10:47:20
asal
248 orang telah melayarinya

Why Doesn't My :first-child Selector Work on My h1 Element?

: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;
}
Salin selepas log masuk

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;
}
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan