CSS'deki genel kardeş birleştirici (~) kullanımda şöyle görünür:
.featured-image ~ p ( font-size: 90%; )Bu örnekte, bir makaledeki öne çıkan görüntüden ("öne çıkan görüntü" sınıf adına sahip bir öğe) sonra gelen tüm paragrafları seçip onları biraz daha küçük hale getiriyor olacaksınız font-size.
Bu, aynı hiyerarşi düzeyindeki öğeleri seçer. Bu örnekte .featured-imageve pöğeler aynı hiyerarşide. Seçici sonra pveya öncesinde devam ederse .featured-image, normal kurallar geçerlidir. Yani .featured-image ~ p spanhala ne olursa olsun torunları kapsamı seçip ediyorum .featured-image ~ pmaçları.
Seviye 4 seçiciler için spesifikasyon, bunları "Aşağıdaki Kardeş Birleştiriciler" olarak adlandırır.
Demo
İşte bir sonraki tüm pöğeleri vurgulayan başka bir örnek img:
img ~ p ( background-color: #FEF0B6; padding: 5px; )Aşağıdakilerle sonuçlanacaktır:
Tuhaflıklar
WebKit, bunları sözde seçicilerle kullanamayacağınız bir tuhaflığa sahipti. Sevmek:
input:checked ~ div ( /* Wouldn't work */ )Bunun düzeltildiği tarayıcıların tam sürümlerini bilmiyorum, ancak şimdi düzeltildi.
Daha fazla bilgi
- Çocuk ve Kardeş Seçiciler
- Bitişik Kardeş Birleştiriciye benzer.
- MDN Belgeleri
Tarayıcı Desteği
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Hiç | 3+ | 1+ | 9+ | 7+ | Hiç | Hiç |