'. Dalam kes sedemikian, ' :has() ” parent selector pseudo-class digunakan.
Catatan ini akan menerangkan:
- Bagaimana untuk Menggayakan Elemen Induk dengan Menentukan Elemen Anaknya?
- Bagaimana untuk Memilih semua Elemen Kanak-kanak?
- Bagaimana untuk Memilih semua Elemen Kanak-Kanak Langsung?
Bagaimana untuk Menggayakan Elemen Induk dengan Menentukan Elemen Anaknya?
Pertama, buat fail HTML yang mempunyai dua elemen 'div' seperti berikut:
- Tambah dua ' 'elemen dengan kelas yang sama' induk-div ”.
- Yang pertama mengandungi dua ' ” unsur.
- Elemen '
' kedua mengandungi ' ” dan “ ”: < div kelas = 'ibu bapa-div' >
< hlm > Hello < / hlm >
< hlm > dunia < / hlm >
< / div >
< div kelas = 'ibu bapa-div' >
< h1 > Hai < / h1 >
< hlm > Saya mempunyai tag 'h1'. < / hlm >
< / div >Jika diperlukan untuk menggayakan elemen '
' yang mempunyai ' ” elemen, maka kita boleh melaraskan penggayaan elemen induk dengan memegang anak. Untuk tujuan ini, kita boleh menggunakan ' :has() ” pemilih.
Daripada kedua-dua elemen '
', pilih satu yang mengandungi elemen '' menggunakan ' .class-name: has(child-name) ”:
.parent-div : mempunyai ( h1 ) {
warna latar belakang : #103e6d ;
warna : kerang laut ;
lebar : 150px ;
ketinggian : 150px ;
jejari sempadan : lima puluh% ;
penjajaran teks : pusat ;
}Di sini, kami telah menggunakan sifat CSS berikut pada elemen induk:
- “ warna latar belakang ” digunakan untuk menentukan warna latar belakang elemen.
- “ warna ” menentukan warna teks elemen.
- “ lebar ” digunakan untuk menentukan lebar elemen.
- “ ketinggian ” menentukan ketinggian unsur.
- “ jejari sempadan sifat ” digunakan untuk menetapkan sudut bulat elemen.
- “ penjajaran teks ” menentukan penjajaran teks.
Pengeluaran
Bagaimana untuk Memilih semua Elemen Kanak-kanak?
Untuk memilih elemen anak dengan bantuan pemilih induk, ikuti contoh yang diberikan.
Contoh
Laksanakan langkah berikut untuk membuat halaman HTML:
- Tambah elemen div yang mengandungi dua ' tag ' dan ' 'tag mempunyai kelas' anak-div ”.
- Kanak-kanak itu ' div elemen ' mengandungi elemen '
< div kelas = 'ibu bapa-div' >':
< hlm > Hello < / hlm >
< hlm > dunia < / hlm >
< div kelas = 'anak-div' >
< hlm > saya div kanak-kanak < / hlm >
< / div >
< / div >Kami boleh memilih elemen kanak-kanak melalui ibu bapa '
” kelas. Ini bukan sahaja akan memilih langsung ' hlm elemen ' tetapi juga memilih bersarang ' hlm 'elemen: .parent-div hlm {
warna latar belakang : #7F167F ;
font-family : kursif ;
Saiz huruf : 25px ;
penjajaran teks : pusat ;
warna : asap putih ;
}Pengeluaran
Bagaimana untuk Memilih semua Elemen Kanak-Kanak Langsung?
Untuk memilih anak langsung div induk, kita boleh menggunakan ' > ” simbol. Ini akan membantu untuk memilih semua elemen 'p' yang merupakan anak langsung ibu bapa '
”. Sebagai contoh, kami telah menggunakan sifat CSS berikut: .parent-div > hlm {
warna latar belakang : #7F167F ;
font-family : kursif ;
Saiz huruf : 30px ;
penjajaran teks : pusat ;
warna : asap putih ;
}' font-family ” menentukan fon elemen yang dipilih dan “ Saiz huruf ” digunakan untuk menentukan saiz fon:
Pengeluaran
Kami telah membincangkan tentang pemilih induk CSS dalam HTML dan CSS.
Kesimpulan
Dalam CSS, ' :has() ” pemilih digunakan sebagai kelas pseudo pemilih induk. Ia digunakan terutamanya untuk memilih elemen induk. Sebagai contoh, ' .parent-div:has(h1) ” memilih elemen induk yang mempunyai “ ” unsur. Untuk memilih elemen anak unsur induk, gunakan ' .induk-div p ”. Pernyataan syarat juga boleh digunakan untuk memilih semua elemen anak langsung. Artikel ini telah menerangkan pemilih induk CSS dengan contoh.
- Kanak-kanak itu ' div elemen ' mengandungi elemen '