Rumah > hujung hadapan web > tutorial css > Bagaimanakah Pemilih CSS `>` Menyasarkan Elemen Anak?

Bagaimanakah Pemilih CSS `>` Menyasarkan Elemen Anak?

Susan Sarandon
Lepaskan: 2024-12-18 13:08:25
asal
376 orang telah melayarinya

How Does the CSS `>` Elemen Anak Sasaran Pemilih?
` 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:

1

2

3

.outer > div {

    ...

}

Salin selepas log masuk
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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan