Bagaimana untuk memilih secara rekursif semua elemen kanak-kanak menggunakan CSS?

CSS (atau Cascading Style Sheets) digunakan untuk membuat dan mereka bentuk halaman web. Ia tidak digunakan secara bersendirian, tetapi bersama-sama dengan HTML atau XML untuk menentukan rupa dan susun atur halaman web. CSS membantu pembangun menggayakan semua elemen HTML, termasuk tajuk, perenggan, teks, imej, jadual dan banyak lagi. Bukan itu sahaja, ia juga menentukan cara ia dipaparkan pada skrin yang berbeza, boleh dicetak atau jenis media lain. Ia juga boleh digunakan untuk membuat reka bentuk web responsif untuk saiz dan peranti skrin yang berbeza.

CSS memainkan peranan penting dalam pembangunan web kerana ia disokong secara meluas oleh semua penyemak imbas web utama, membolehkan pembangun mencipta antara muka pengguna (UI) dan aplikasi web dinamik yang sangat baik yang melibatkan pengguna dan Meningkatkan pengalaman keseluruhan mereka. Memilih elemen ialah salah satu tugas yang paling biasa apabila menggayakan elemen HTML dengan CSS. Anda akan perasan bahawa dalam sesetengah kes, kami mungkin mahu memilih semua elemen anak bagi sesuatu elemen, termasuk anak bersarang mereka. Dalam artikel ini, kita akan melihat cara memilih semua elemen kanak-kanak ini secara rekursif dengan bantuan CSS.

Apakah pemilih CSS?

Pemilih CSS ialah corak untuk memilih dan meletakkan elemen HTML untuk penggayaan atau operasi lain. Pemilih memilih elemen berdasarkan atribut seperti kelas, id atau jenis. Sintaks untuk menggunakan pemilih CSS adalah seperti berikut:

tatabahasa

element > element {
   //CSS styles go here
}

Apakah pemilih kanak-kanak dalam CSS?

Pemilih anak dalam CSS ialah penggabung yang memilih elemen anak langsung bagi elemen induk. Ia ditakrifkan menggunakan simbol ">". Ia juga memilih elemen anak langsung bagi elemen induk yang ditentukan.

tatabahasa

.parent > li {
   //CSS styles go here
}

Sintaks terdiri daripada simbol ">", yang hanya menyasarkan elemen anak langsung elemen "senarai utama", dalam kes ini "li". Oleh itu, peraturan CSS yang ditakrifkan di atas hanya memilih senarai "Item Senarai 1" dan "Item Senarai 2", tetapi bukan senarai "Senarai 1" yang bersarang dalam elemen ul bersarang.

Pemilih kanak-kanak berguna apabila anda perlu menggunakan gaya pada elemen anak tertentu bagi elemen induk tanpa menjejaskan elemen anak bawahan atau bersarang mereka. Pemilih kanak-kanak juga menyediakan cara yang lebih khusus untuk mencari elemen dalam pepohon dokumen dan boleh membantu mengelakkan konflik dengan peraturan CSS lain yang mungkin digunakan pada elemen yang serupa.

Pilih secara rekursif semua elemen anak dalam CSS

Kadang-kadang mungkin terdapat situasi di mana kita perlu memilih semua elemen anak, kita boleh menggunakan pemilih CSS untuk memilih elemen menggunakan operator (*). Sintaks untuk memilih semua elemen anak elemen ditakrifkan menggunakan pengendali ">". Sebagai contoh, peraturan CSS berikut memilih semua anak langsung elemen "ibu bapa".

tatabahasa

.main-list > * {
   //CSS styles go here
}

Sintaks di atas memilih semua elemen anak elemen "senarai utama", termasuk elemen anak bersarangnya. Anda akan perasan bahawa ruang antara elemen "senarai utama" dan pemilih kad bebas (*) menunjukkan bahawa kami ingin memilih semua keturunan elemen "ibu bapa", bukan hanya anak langsung.

Anda juga boleh menggunakan kelas pseudo " :not() " untuk mengecualikan elemen tertentu daripada pemilihan. Sebagai contoh, peraturan CSS berikut secara rekursif memilih semua elemen anak bagi elemen "senarai utama", kecuali elemen "senarai-bukan" -

Contoh 1: Contoh menunjukkan memilih semua elemen kanak-kanak

Dalam contoh di bawah, kami mentakrifkan kelas .parent > div yang menggunakan gaya pada mana-mana elemen yang merupakan anak langsung elemen dengan kelas "ibu bapa". Dalam kes ini, satu-satunya elemen yang memenuhi syarat ini ialah elemen jenis "senarai utama".

Gaya yang dinyatakan dalam kod CSS menetapkan warna latar belakang elemen

padanan kepada hijau. Oleh itu, warna latar belakang elemen

dengan nama kelas "senarai-utama" akan menjadi hijau. Elemen

dalam elemen

dengan nama kelas "senarai-utama" tidak akan dipengaruhi oleh gaya CSS ini kerana ia bukan anak langsung kepada elemen induk dengan nama kelas "ibu bapa".

Namun, kedua-dua unsur

yang merupakan anak langsung kepada unsur ibu bapa juga tidak akan terjejas kerana ia bukan unsur.

<!DOCTYPE html>
<html>
   <head>
      <style>
         .parent > div {
            background-color: green;
         }
      </style>
   </head>
   <body>
      <div class="parent">
         <div class="main-list">
            <li>List item 1</li>
            <li>List item 2</li>
         </div>
         <li>List item 3</li>
         <li>List item 4</li>
      </div>
   </body>
</html>

Contoh 2: Contoh menunjukkan pemilihan rekursif semua elemen kanak-kanak

Dalam contoh yang diberikan, pemilih CSS "div.parent > *" digunakan untuk memilih secara rekursif semua elemen anak elemen "div" yang mempunyai kelas "ibu bapa", yang bermaksud ia memilih semua "div" Elemen keturunan", termasuk elemen bersarang.

Dalam kod yang diberikan, pemilih digunakan bersama dengan atribut "warna latar belakang: hijau", yang menetapkan warna latar belakang kepada hijau untuk semua elemen anak elemen "div" dengan kelas "ibu bapa", termasuk Elemen "li" bersarang dan elemen "li" dalam elemen "span".

<!DOCTYPE html>
<html>
   <head>
      <style>
         div.parent,
         div.parent > * {
            background-color: green;
         }
      </style>
   </head>
   <body>
      <div class="parent">
         <li>List item 1</li>
         <li>List item 2</li>
         <span>
            <li>List item 3</li>
         </span>
      </div>
      <li>List item 4</li>
      <li>List item 5</li>
   </body>
</html>

KESIMPULAN

CSS ialah bahasa yang digunakan untuk menggayakan halaman web. Dalam CSS, memilih elemen adalah salah satu tugas yang paling biasa. Pemilih anak dalam CSS digunakan untuk memilih elemen anak langsung bagi elemen induk. Ia ditakrifkan menggunakan simbol ">". Kadangkala kita perlu memilih semua elemen kanak-kanak secara rekursif, yang boleh dicapai menggunakan pengendali ().

Dengan menggunakan ruang antara elemen induk dan pemilih kad bebas (), kita boleh memilih semua unsur turunan unsur induk. Kelas pseudo ":not()" juga boleh digunakan untuk mengecualikan elemen tertentu daripada pemilihan. Pemilih CSS adalah penting untuk mencipta laman web yang menarik secara visual dan dinamik yang meningkatkan pengalaman pengguna.