CSS `>` Pemilih: Bagaimana Ia Menyasarkan Elemen Kanak-kanak?

` Pemilih: Bagaimana Ia Menyasarkan Elemen Kanak-kanak? " />

CSS '>' Pemilih: Apa Fungsinya?

'>' pemilih dalam CSS, juga dikenali sebagai "pemilih kanak-kanak," digunakan untuk memilih elemen yang merupakan anak terdekat bagi elemen lain dalam bahasa Inggeris biasa, ia memilih elemen yang bersarang secara langsung dalam elemen induknya.

Cara Ia Berfungsi:

Untuk menggunakan '>' pemilih, hanya letakkannya selepas pemilih elemen induk, seperti yang dilihat dalam contoh berikut:

parent-element > child-element {
  ...
}

Dalam kod ini, mana-mana elemen dengan kelas "elemen anak" hanya akan dipengaruhi oleh peraturan CSS jika ia adalah keturunan langsung unsur dengan kelas "elemen ibu bapa."

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>

Jika anda menggunakan peraturan CSS berikut pada ini struktur:

.outer > .middle {
  border: 1px solid orange;
}

Sempadan oren hanya akan digunakan pada dua div "tengah" yang merupakan keturunan langsung div "luar". Div "dalam" dalam div "tengah" ini tidak akan menerima sempadan jingga kerana mereka bukan anak langsung div "luar".

Atas ialah kandungan terperinci CSS `>` Pemilih: Bagaimana Ia Menyasarkan Elemen Kanak-kanak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!