Cara Memilih Elemen Segera Sebelum Elemen Diberi: Memahami ' ” (Plus) dan '~” (Tilde) Pemilih Adik Beradik Bersebelahan dalam CSS?-tutorial css-php.cn

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>

Salin selepas log masuk

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

Salin selepas log masuk

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!

sumber：php.cn

Artikel sebelumnya：Mengapa imej latar belakang saya dipotong dalam Firefox dan Safari pada peranti iOS? Artikel seterusnya：Bagaimana untuk Menghapuskan Sempadan Berganda dalam CSS: Garis Besar lwn. Margin Negatif?

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

Isu terkini

function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...

daripada 2024-04-29 11:01:01

1686

Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?

daripada 2024-04-23 00:22:19

1840

Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.

daripada 2024-04-19 15:37:47

1565

Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...