CSS-i üldine õdede-vendade kombinator (~) näeb kasutamisel välja selline:
.featured-image ~ p ( font-size: 90%; )Selles näites valiksite kõik artikli lõigud, mis järgnevad esiletõstetud pildile (element, mille klassi nimi on „esiletõstetud pilt”), ja muudaks need veidi väiksemaks font-size.
See valib elemendid samal hierarhia tasemel. Selles näites .featured-imageja pelemendid asuvad samas hierarhias. Kui valija jätkas möödunud ajast pvõi varem .featured-image, kehtivad tavapärased reeglid. Nii et .featured-image ~ p spanikkagi valiks vahemikud, mis on mis tahes .featured-image ~ pvastete järeltulijad .
Selektorite 4. taseme spetsifikatsioon nimetab neid “Jälgivateks õdede kombinatoriteks”.
Demo
Siin on veel üks näide, mis toob esile kõik pelemendid, mis järgnevad img:
img ~ p ( background-color: #FEF0B6; padding: 5px; )Selle tulemuseks on järgmine:
Veidrused
Varem oli WebKitis selline veidrus, kus te ei saanud neid pseudovalijatega kasutada. Nagu:
input:checked ~ div ( /* Wouldn't work */ )Ma ei tea brauserite täpseid versioone, kus see parandati, kuid see on nüüd parandatud.
Rohkem informatsiooni
- Laste ja vendade valijad
- Sarnane külgneva õdede-vendade kombinaatoriga.
- MDN-i dokumendid
Brauseri tugi
| Chrome | Safari | Firefox | Ooper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Ükskõik | 3+ | 1+ | 9+ | 7+ | Ükskõik | Ükskõik |