` Elemen Anak Sasaran Pemilih?
" />
Pemilih CSS '>: Menyelidiki Penggunaan dan Maksudnya
CSS '>' pemilih ialah alat yang mujarab untuk menyasarkan elemen tertentu dalam hierarki dokumen Ia memilih elemen anak yang bersarang serta-merta dalam elemen induk.
Sebagai contoh, pertimbangkan struktur HTML berikut:
1 2 3 4 5 6 7 8 | <div class = 'outer' >
<div class = "middle" >
<div class = "inner" >...</div>
</div>
<div class = "middle" >
<div class = "inner" >...</div>
</div>
</div>
|
Salin selepas log masuk
Sekarang, jika anda mengisytiharkan peraturan CSS seperti ini:
Peraturan itu hanya akan digunakan pada 'tengah' divs, yang merupakan keturunan langsung (anak-anak terdekat) daripada unsur '.luar' Ini kerana '>'. pemilih memastikan bahawa elemen sasaran bersarang terus dalam elemen induk.
Untuk menggambarkan ini, rujuk contoh biola yang disediakan dalam jawapan:
1 2 3 4 5 6 7 | div {
border: 1px solid black;
padding: 10px;
}
.outer > div {
border: 1px solid orange;
}
|
Salin selepas log masuk
Dalam contoh ini, 'div ' elemen mempunyai sempadan hitam, manakala div 'tengah' yang bersarang dalam div 'luar' mempunyai sempadan oren tambahan, menyerlahkan kesan '>' pemilih.
Menggunakan '>' pemilih memberi anda kuasa untuk menyasarkan elemen kanak-kanak tertentu dengan tepat, membenarkan kawalan yang lebih terperinci ke atas penggayaan dan reka letak.
Atas ialah kandungan terperinci Bagaimanakah Pemilih CSS `>` Menyasarkan Elemen Anak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!