DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Der allgemeine Geschwisterselektor (~) in CSS sieht in der Anwendung so aus
.featured-image ~ p {
font-size: 90%;
}In diesem Beispiel würden Sie alle Absätze in einem Artikel auswählen, die nach dem hervorgehobenen Bild (ein Element mit dem Klassennamen „featured-image“) kommen, und ihnen eine etwas kleinere `font-size` geben.
Dies wählt Elemente auf derselben Hierarchieebene aus. In diesem Beispiel befinden sich `.featured-image` und die `p`-Elemente auf derselben Hierarchie. Wenn der Selektor über `p` hinausginge oder vor `.featured-image` stünde, gelten die normalen Regeln. ` .featured-image ~ p span ` würde also immer noch `span`-Elemente auswählen, die Nachfahren von dem sind, was `.featured-image ~ p` entspricht.
Die Spezifikation für Selektoren Level 4 nennt diese „Following Sibling Combinators“.
Demo
Hier ist ein weiteres Beispiel, das alle `p`-Elemente hervorhebt, die einem `img` folgen
img ~ p {
background-color: #FEF0B6;
padding: 5px;
}Was zu folgendem Ergebnis führt
Eigenheiten
WebKit hatte früher eine Eigenheit, bei der man diese nicht mit Pseudo-Selektoren verwenden konnte. Wie zum Beispiel
input:checked ~ div {
/* Wouldn't work */
}Ich kenne die genauen Browser-Versionen, in denen dies behoben wurde, nicht, aber es ist jetzt behoben.
Weitere Informationen
- Kind- und Geschwisterselektoren
- Ähnlich wie der Adjacent Sibling Combinator.
- MDN Docs
Browser-Unterstützung
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Alle | 3+ | 1+ | 9+ | 7+ | Alle | Alle |
Ich finde diesen Trick etwas schwierig zu verstehen,
„würde immer noch spans auswählen, die nachfahren von dem sind, was“
Geben Sie ein Beispiel, um diesen Trick zu verstehen…
Für diejenigen, die diesen Selektor nicht verstanden haben, probieren Sie dieses Beispiel
http://codepen.io/anon/pen/jPOxOa
Sie haben es perfekt getroffen. Klar und prägnant. 10/10
Goldstern. Klopf auf die Schulter.
Wenn die Leute es immer noch nicht verstehen: Ein „Geschwister“-Element (b) eines anderen Elements (a) ist so, dass (b) nach (a) kommt und denselben direkten Elternteil wie (a) hat, d.h.
Im obigen Beispiel wählt der Selektor `.b ~ .a` alle `.a` aus, sodass `.a` nach einem `.b` kommt und denselben direkten Elternteil wie `.a` hat – daher wären in diesem Beispiel nur die letzten beiden `.a`-Elemente ausgewählt.
Nur eine Anmerkung.
Die WebKit-Eigenheit ist bei Chrome unter iOS9 wieder aufgetreten, wo man den allgemeinen Geschwisterselektor nicht mit Pseudo-Selektoren verwenden kann. Hoffentlich beheben sie es bald.
Ich finde, dass sich Chrome unter iOS in vielerlei Hinsicht seltsam verhält. Dinge unter Chrome unter iOS richtig hinzubekommen, im Vergleich zu Chrome unter Android, ist ein großer Unterschied.
Ich stimme zu. Ich hatte das gleiche Problem. Weiß jemand, wann das behoben sein kann?