CSS vispārējais brāļu un māsu kombinators (~) izskatās šādi:
.featured-image ~ p ( font-size: 90%; )Šajā piemērā jūs atlasīsit visas raksta rindkopas, kas atrodas aiz attēlotā attēla (elements ar klases nosaukumu “Featured-image”), un padarīsit tos nedaudz mazākus font-size.
Tādējādi elementi tiek atlasīti tajā pašā hierarhijas līmenī. Šajā piemērā .featured-imageun pelementi atrodas vienā hierarhijā. Ja atlasītājs turpināja darbību ppirms vai pirms .featured-image, tiek piemēroti parastie noteikumi. Tātad .featured-image ~ p spanjoprojām būtu jāizvēlas laidumi, kas ir jebkura .featured-image ~ pmača pēcteči .
Specifikācija 4. līmeņa atlasītājiem tos sauc par “Sekojošajiem māsu kombinatoriem”.
Demonstrācija
Šeit ir vēl viens piemērs, kas izceļ visus pelementus, kas seko img:
img ~ p ( background-color: #FEF0B6; padding: 5px; )Kā rezultātā:
Dīvainības
Kādreiz WebKit bija dīvainība, kad jūs tos nevarējāt izmantot ar pseido atlasītājiem. Patīk:
input:checked ~ div ( /* Wouldn't work */ )Es nezinu precīzas pārlūkprogrammu versijas, kurās tas tika novērsts, taču tagad tas ir novērsts.
Vairāk informācijas
- Bērnu un māsu atlasītāji
- Līdzīgs blakus esošo brāļu un māsu kombinatoram.
- MDN dokumenti
Pārlūka atbalsts
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Jebkurš | 3+ | 1+ | 9+ | 7+ | Jebkurš | Jebkurš |