Bagaimanakah Pemilih CSS `>` Menyasarkan Elemen Anak?

` 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:

<div class='outer'>
    <div class="middle">
        <div class="inner">...</div>
    </div>
    <div class="middle">
        <div class="inner">...</div>
    </div>
</div>

Sekarang, jika anda mengisytiharkan peraturan CSS seperti ini:

.outer > div {
    ...
}

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:

div {
  border: 1px solid black;
  padding: 10px;
}
.outer > div {
  border: 1px solid orange;
}

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!