Rumah > Artikel > hujung hadapan web > Cara Memilih Elemen Segera Sebelum Elemen Diberi: Memahami “ ” (Plus) dan “~” (Tilde) Pemilih Adik Beradik Bersebelahan dalam CSS?

Cara Memilih Elemen Segera Sebelum Elemen Diberi: Memahami “ ” (Plus) dan “~” (Tilde) Pemilih Adik Beradik Bersebelahan dalam CSS?

Mary-Kate Olsenasal: 2024-10-26 18:30:30979semak imbas

How to Select Elements Immediately Before a Given Element: Understanding “ ” (Plus) and “~” (Tilde) Adjacent Sibling Selectors in CSS?

Pemilih Adik Beradik Bersebelahan: Memahami Perbezaan Antara div p (Plus) dan div ~ p (Tilde)

Apabila bekerja dengan pemilih CSS, adalah penting untuk memahami perbezaan antara pemilih div p (tambah) dan div ~ p (tilde). Walaupun bunyinya serupa, implikasinya berbeza dengan ketara.

Pemilih div p (Plus)

Pemilih div p memilih semua

elemen yang diletakkan serta-merta selepas

elemen. Ini bermakna bahawa

elemen mestilah adik beradik langsung

elemen.

pemilih div ~ p (Tilde)

Berbeza dengan pemilih div p, pemilih div ~ p memilih semua

elemen yang didahului oleh

elemen. Ini termasuk bukan sahaja adik-beradik langsung tetapi juga mana-mana

elemen yang datang selepas sebarang

elemen dalam pepohon dokumen.

Memilih Pemilih yang Betul

Untuk menangani pertanyaan anda mengenai pemilihan elemen yang diletakkan sejurus sebelum elemen tertentu, anda harus menggunakan sintaks berikut:

E1 E2

Pemilih ini sepadan dengan elemen E2 yang segera didahului oleh elemen E1. Dalam kes anda, anda akan menggunakan div p untuk memilih

elemen yang bersebelahan dan mendahului

elemen.

Contoh

Pertimbangkan kod HTML dan CSS berikut:

<code class="html"><div id="container">
    <ul>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
    </ul>
    <p>This will be red</p>
    <p>This will be black</p>
    <p>This will be black</p>
</div></code>

<code class="css">ul + p {
    color: red;
}</code>

Dalam contoh ini, hanya elemen akan mempunyai teks merah. Ini kerana pemilih ul p hanya sepadan dengan adik beradik langsung.

Atas ialah kandungan terperinci Cara Memilih Elemen Segera Sebelum Elemen Diberi: Memahami “ ” (Plus) dan “~” (Tilde) Pemilih Adik Beradik Bersebelahan dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css html while select this ul

Kenyataan：

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 sebelumnya：Mengapa imej latar belakang saya dipotong dalam Firefox dan Safari pada peranti iOS?Artikel seterusnya：Mengapa imej latar belakang saya dipotong dalam Firefox dan Safari pada peranti iOS?

Artikel berkaitan

Lihat lagi