Bagaimana untuk Memilih Elemen Segera Sebelum Elemen Lain dalam CSS?-tutorial css-php.cn

How to Select an Element Immediately Before Another Element in CSS?

Memahami Perbezaan Antara div p dan div ~ p

Dalam pemilih CSS, pengendali tambah ( ) dan tilde (~) kedua-duanya memilih unsur adik-beradik unsur tertentu. Walau bagaimanapun, tingkah laku mereka berbeza berdasarkan kedudukan elemen berbanding dengan adik beradiknya.

div p (Pemilih Adik Bersebelahan)

Pemilih ini sepadan dengan semua

elemen yang sejurus selepas

unsur. Contohnya:

div + p {
  color: red;
}

Salin selepas log masuk

Dalam kes ini, hanya perenggan pertama yang mengikuti setiap

akan mempunyai teks merah.

div ~ p (Pemilih Adik Beradik Umum)

Pemilih ini sepadan dengan semua

elemen yang didahului oleh

elemen, tanpa mengira kedudukan mereka. Contohnya:

div ~ p {
  color: blue;
}

Salin selepas log masuk

Dalam kes ini, semua perenggan yang datang selepas sebarang

elemen akan mempunyai teks biru.

Menjelaskan Soalan

Soalan meminta pemilih yang memilih elemen yang diletakkan sejurus sebelum elemen tertentu. Ini tidak boleh dicapai dengan pemilih div p atau div ~ p.

Pemilih Adik Beradik Bersebelahan untuk Elemen Sebelumnya

Untuk memilih elemen yang berada serta-merta sebelum elemen lain, anda boleh menggunakan pemilih adik beradik bersebelahan dengan susunan terbalik:

X Y

Dalam sintaks ini, X ialah elemen sebelumnya dan Y ialah subjek pemilih. Contohnya:

p + ul {
  color: green;
}

Salin selepas log masuk

Pemilih ini akan menggunakan teks hijau hanya pada senarai pertama yang tidak tertib selepas setiap perenggan.

Atas ialah kandungan terperinci Bagaimana untuk Memilih Elemen Segera Sebelum Elemen Lain dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber：php.cn

Artikel sebelumnya：Adakah Atribut \"skop\" HTML Mati? Kisah Ciri Yang Tidak Pernah Ada Artikel seterusnya：## Bagaimana untuk Menyelesaikan Percanggahan Seret/Ubah Saiz jQuery dengan Skala Transformasi CSS?

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

2500

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

2644

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

2236

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