Penggabungan saudara am (~) dalam CSS kelihatan seperti ini digunakan:
.featured-image ~ p ( font-size: 90%; )Dalam contoh itu, Anda akan memilih semua perenggan dalam artikel yang muncul setelah gambar yang ditampilkan (elemen dengan nama kelas "ditampilkan-gambar") dan menjadikannya sedikit lebih kecil font-size.
Ini memilih elemen pada tahap hierarki yang sama. Dalam contoh ini .featured-imagedan pelemen berada pada hierarki yang sama. Sekiranya pemilih meneruskan masa lalu patau sebelumnya .featured-image, peraturan biasa berlaku. Jadi .featured-image ~ p spanmasih akan memilih rentang yang merupakan keturunan dari apa sahaja .featured-image ~ pperlawanan.
Spesifikasi untuk pemilih tahap 4 menyebutnya "Follow Sibling Combinators".
Demo
Inilah contoh lain yang menyoroti semua pelemen yang mengikuti img:
img ~ p ( background-color: #FEF0B6; padding: 5px; )Yang akan menghasilkan perkara berikut:
Kebiasaan
WebKit biasanya mempunyai kebiasaan di mana anda tidak dapat menggunakannya dengan pemilih semu. Seperti:
input:checked ~ div ( /* Wouldn't work */ )Saya tidak tahu versi penyemak imbas yang tepat di mana ia diperbaiki, tetapi kini telah diperbaiki.
Maklumat lanjut
- Pemilih Kanak-kanak dan Adik Beradik
- Mirip dengan Adibacent Sibling Combinator.
- Dokumen MDN
Sokongan Penyemak Imbas
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Sebarang | 3+ | 1+ | 9+ | 7+ | Sebarang | Sebarang |