Pemilih gabungan CSS
Pemilih Gabungan CSS
Pemilih Gabungan CSS membolehkan anda memahami secara intuitif hubungan antara pemilih.
 | 组合选择符说明了两个选择器直接的关系。 |
|---|
Pemilih gabungan CSS termasuk pelbagai kombinasi pemilih mudah.
mengandungi empat kaedah gabungan dalam CSS3:
Pemilih turunan (dipisahkan oleh ruang)
Pemilih elemen kanak-kanak (dipisahkan oleh lebih besar daripada tanda)
Pemilih adik beradik bersebelahan (dipisahkan dengan tanda tambah)
Pemilih adik beradik biasa (dipisahkan dengan tanda sempang yang dibataskan)
Pemilih Keturunan
Pemilih keturunan memadankan semua elemen keturunan unsur yang layak.
Contoh berikut memilih semua <p> elemen dan memasukkannya ke dalam elemen <div>
Contoh Jalankan »Klik butang "Run Example" untuk melihat contoh dalam talian
Pemilih elemen kanak-kanakPemilih elemen kanak-kanak berbanding dengan pemilih keturunan Pemilih anak hanya boleh memilih elemen yang merupakan anak kepada elemen. Contoh berikut memilih semua elemen anak langsung<p> dalam elemen <div> >Jalankan contoh»
Klik butang "Jalankan contoh" untuk melihat contoh dalam talianPemilih adik beradik bersebelahanPemilih pemilih adik beradik bersebelahan) boleh pilih elemen serta-merta mengikuti elemen lain, dan kedua-duanya mempunyai elemen induk yang sama.
Jika anda perlu memilih elemen sejurus selepas elemen lain, dan kedua-duanya mempunyai elemen induk yang sama, anda boleh menggunakan pemilih adik beradik bersebelahan.
Contoh berikut memilih semua elemen <p> pertama selepas elemen <div>
Contoh
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div p
{
background-color:yellow;
}
</style>
</head>
<body>
<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>
<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
</body>
</html>Jalankan contoh»Klik butang "Jalankan contoh" untuk melihat contoh dalam talianPemilih adik-beradik seterusnyaPemilih adik-beradik seterusnya memilih semua unsur adik beradik bersebelahan selepas unsur yang ditentukan.
Contoh berikut memilih semua elemen adik beradik bersebelahan<p> selepas semua elemen <div> >Jalankan Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
