Apakah penggunaan pemilih hierarki?

Apakah penggunaan pemilih hierarki diperlukan contoh kod khusus

Pemilih hierarki ialah pemilih dalam CSS yang boleh memilih elemen tertentu melalui perhubungan antara elemen. Pemilih hierarki termasuk pemilih anak, pemilih keturunan, pemilih adik beradik bersebelahan dan pemilih adik beradik am.

Pemilih kanak-kanak diwakili oleh tanda lebih besar daripada (>), yang mewakili elemen anak langsung bagi elemen yang dipilih. Contohnya, pilih semua elemen anak langsung bagi anak kelas di bawah elemen dengan induk kelas:

.parent > .child {
    //样式
}

Pemilih keturunan diwakili oleh ruang untuk menunjukkan unsur keturunan unsur yang dipilih. Sebagai contoh, pilih semua unsur keturunan keturunan kelas di bawah unsur dengan moyang kelas:

.ancestor .descendant {
    //样式
}

Pemilih adik beradik bersebelahan diwakili dengan tanda tambah (+), menunjukkan bahawa unsur adik beradik bersebelahan unsur yang dipilih dipilih. Sebagai contoh, pilih elemen dengan elemen kelas1 diikuti dengan elemen adik beradik dengan elemen kelas2:

.element1 + .element2 {
    //样式
}

Pemilih adik beradik am diwakili oleh tilde (~) untuk menunjukkan unsur adik beradik am bagi elemen yang dipilih. Sebagai contoh, pilih semua elemen adik beradik kelas elemen2 berikut selepas elemen dengan elemen kelas1:

.element1 ~ .element2 {
    //样式
}

Menggunakan pemilih hierarki boleh memilih elemen sasaran berdasarkan perhubungan antara elemen, dengan itu mencapai kawalan gaya yang lebih tepat. Berikut ialah contoh kod khusus:

Kod HTML:

<div class="parent">
    <div class="child">这是子元素1</div>
    <div class="child">这是子元素2</div>
</div>
<div class="ancestor">
    <div class="descendant">这是后代元素1</div>
    <div class="descendant">这是后代元素2</div>
</div>
<div class="element1">这是元素1</div>
<div class="element2">这是元素2</div>
<div class="element2">这是元素3</div>

Kod CSS:

.parent > .child {
    color: red;
}

.ancestor .descendant {
    font-size: 20px;
}

.element1 + .element2 {
    background-color: blue;
}

.element1 ~ .element2 {
    text-align: center;
}

Dalam kod di atas, anak langsung bagi elemen dengan induk kelas dipilih melalui pemilih anak (.parent > .child) elemen dan tetapkan warna fonnya kepada merah. Gunakan pemilih keturunan (.ancestor .descendant) untuk memilih semua elemen keturunan keturunan kelas di bawah elemen moyang kelas dan tetapkan saiz fonnya kepada 20px. Gunakan pemilih adik beradik bersebelahan (.elemen1 + .elemen2) untuk memilih elemen adik beradik bagi elemen kelas2 serta-merta mengikut elemen dengan elemen kelas1 dan tetapkan warna latar belakangnya kepada biru. Gunakan pemilih adik beradik am (.element1 ~ .element2) untuk memilih semua elemen adik beradik berikutnya bagi elemen2 kelas yang mengikut elemen dengan elemen kelas1 dan memaparkan teksnya di tengah.

Penggunaan pemilih hierarki boleh memilih elemen HTML dengan lebih fleksibel Dengan menggabungkan pemilih hierarki yang berbeza, kita boleh mencapai pelbagai kesan gaya. Menguasai penggunaan pemilih hierarki boleh menjadikan gaya CSS lebih mudah diselenggara dan boleh dibaca, dan juga boleh meningkatkan kecekapan pembangunan.

Atas ialah kandungan terperinci Apakah penggunaan pemilih hierarki?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!