Ketahui lebih lanjut tentang pemilih hubungan: Pengenalan terperinci kepada pemilih hubungan biasa dan kes aplikasi

Fahami pemilih perhubungan: Penjelasan terperinci tentang pemilih perhubungan biasa dan penggunaannya

Pengenalan: Pemilih perhubungan dalam HTML ialah pemilih yang digunakan untuk memilih elemen dalam perhubungan hierarki, melalui gabungan pemilih yang fleksibel, kita boleh memilih dengan tepat elemen yang kita inginkan. Artikel ini akan memperkenalkan pemilih hubungan biasa dan penggunaannya serta melampirkan contoh kod khusus untuk membantu pembaca memahami dan menggunakan pemilih ini dengan lebih baik.

1. Pemilih kanak-kanak (pemilih kanak-kanak)

Pemilih kanak-kanak digunakan untuk memilih elemen anak langsung di bawah elemen. Sintaksnya ialah "elemen induk > elemen anak". Berikut ialah contoh kod:

<style>
ul > li {
    color: red;
}
</style>

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
</ul>

Dalam kod di atas, kami mentakrifkan peraturan gaya untuk menetapkan warna teks elemen anak langsung li di bawah elemen ul kepada merah. Dengan cara ini, hanya elemen anak langsung li di bawah elemen ul akan menggunakan gaya ini, manakala elemen cucu li di bawah elemen ul tidak akan terjejas.

2. Pemilih keturunan

Pemilih keturunan digunakan untuk memilih semua elemen keturunan di bawah unsur tertentu, tidak kira betapa dalam tahapnya. Sintaksnya ialah "elemen keturunan unsur nenek moyang". Berikut ialah contoh kod:

<style>
ul li {
    color: blue;
}
</style>

<ul>
    <li>列表项1</li>
    <li>列表项2
        <ul>
            <li>嵌套列表项1</li>
            <li>嵌套列表项2</li>
        </ul>
    </li>
    <li>列表项3</li>
    <li>列表项4</li>
</ul>

Dalam kod di atas, kami mentakrifkan peraturan gaya untuk menetapkan warna teks semua elemen keturunan li di bawah elemen ul kepada biru. Dengan cara ini, bukan sahaja elemen anak langsung li di bawah elemen ul akan menggunakan gaya ini, tetapi elemen li bersarang juga akan terjejas.

3. Pemilih adik beradik bersebelahan

Pemilih adik beradik bersebelahan digunakan untuk memilih elemen adik beradik seterusnya bersebelahan dengan elemen. Sintaksnya ialah "elemen 1 + elemen 2". Berikut ialah contoh kod:

<style>
h2 + p {
    font-weight: bold;
}
</style>

<h2>标题</h2>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>

Dalam kod di atas, kami mentakrifkan peraturan gaya untuk menebalkan fon elemen p tepat di belakang elemen h2. Dengan cara ini, hanya elemen p pertama serta-merta selepas elemen h2 akan menggunakan gaya ini, manakala elemen p lain tidak akan terjejas.

4. Pemilih adik beradik am

Pemilih adik beradik digunakan untuk memilih semua elemen adik beradik di sebalik elemen. Sintaksnya ialah "Elemen 1 ~ Elemen 2". Berikut ialah contoh kod:

<style>
h2 ~ p {
    color: green;
}
</style>

<h2>标题</h2>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>

Dalam kod di atas, kami mentakrifkan peraturan gaya untuk menetapkan warna teks semua elemen p serta-merta mengikut elemen h2 kepada hijau. Dengan cara ini, kecuali untuk elemen p pertama serta-merta mengikuti elemen h2, gaya ini akan digunakan pada semua elemen p lain.

Ringkasan:

Pemilih hubungan ialah pemilih elemen HTML yang sangat berguna dan sering digunakan semasa menulis gaya CSS. Penggunaan fleksibel pemilih elemen kanak-kanak, pemilih keturunan, pemilih adik-beradik bersebelahan dan pemilih adik-beradik membolehkan kami memilih elemen yang diperlukan dengan lebih tepat dan memproses serta mencantikkan gaya.

Kami berharap pengenalan dan contoh kod artikel ini dapat membantu pembaca lebih memahami dan menguasai penggunaan pemilih hubungan ini, supaya ia boleh digunakan secara fleksibel dalam projek sebenar. Jika anda mempunyai sebarang pertanyaan atau cadangan, sila tinggalkan mesej di ruangan komen. Terima kasih kerana membaca!

Atas ialah kandungan terperinci Ketahui lebih lanjut tentang pemilih hubungan: Pengenalan terperinci kepada pemilih hubungan biasa dan kes aplikasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!