DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Der Adjacent Sibling Combinator in CSS ist kein eigenständiger Selektor, sondern eine Möglichkeit, zwei Selektoren zu kombinieren. Zum Beispiel
p + p {
margin: 0;
}Das Pluszeichen (+) ist der Adjacent Sibling Combinator, zwischen zwei Paragraph-Tag (Element)-Selektoren. Das bedeutet "wähle jeden Paragraph-Tag aus, der direkt auf einen anderen Paragraph-Tag folgt (ohne etwas dazwischen)". Hier sind einige Beispiele, was es auswählen würde
<div>
<p>I'm a paragraph</p>
<p>I get selected!</p>
</div>
<div>
<p>I'm a paragraph</p>
<h2>Monkey hair</h2>
<p>I will NOT get selected</p>
</div>Dies ist meistens nützlich, wenn Sie semantisches Markup verwenden und Szenarien anpassen müssen, in denen Elemente direkt nebeneinander liegen.
Siehe den Pen Adjacent Sibling Selector von Sara Cope (@saracope) auf CodePen.
Weitere Ressourcen
Browser-Unterstützung
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Alle | Alle | Alle | Alle | 7+ | Alle | Alle |
Großartig! Danke fürs Teilen!
Hallo Mann, danke für die vielen Dinge, aber ich brauche deine Hilfe. Du hast Kommentare unter PHP-Chat deaktiviert. Ich möchte dich nach PHP-Voice-Chat fragen. Ich möchte einen Chatroom erstellen, der auch Voice-Chat bietet. Kannst du mir helfen? Danke vielmals :)
Ich hoffe, du antwortest
Danke Leute!
Die klarste Definition davon, die ich gefunden habe. Danke!
Die Erklärung ist klar, aber ich finde es schwer, gute alltägliche Beispiele für die Verwendung des + Combinators in realem CSS zu finden ;-)
Das obige Beispiel illustriert seinen Punkt, aber für Bildunterschriften würde ich ein fig-Element verwenden, das das img umschließt, und ein figcaption-Element
Auf diese Weise können Sie die Bildunterschrift einfach ohne einen Adjacent Sibling Selektor stylen. Hat jemand reale Beispiele für den Adjacent + Combinator?
Wie wäre es damit
h1, h2 { margin: 1em 0 }h1 + h2 { margin-top: -.5em }
Ränder für h1 und h2 Überschriften, außer wenn eine h2 direkt auf eine h1 folgt (Anwendungsfall im realen Leben: Sie haben möglicherweise Abschnittsüberschriften für einen Beitrag, ohne einen Einführungsparagraphen für den Beitrag zu haben, und es sieht seltsam aus mit diesem zusätzlichen Abstand).
Servus Peter, hier ist ein reales Beispiel dafür: Wenn ich 100 divs habe und nur das direkt nächste Element nach jedem .something-class auswählen möchte. BTW, Contao regelt! ;-)
Das ist eine schöne, prägnante Beschreibung. Danke.
Gibt es eine Abkürzung, um so viele + Zeichen zu vermeiden, wenn ich das 10. Element mit Adjacent-Sibling stylen möchte? Ich möchte nth-child nicht verwenden
z.B.: .container > li + li + li + li + li{}
http://codepen.io/anon/pen/vGKEVb
Wie wäre es mit :nth-of-type anstelle von nth-child? Auf diese Weise wählen Sie nur das z. B. 5. li-Element aus, unabhängig davon, wie viele andere Elemente sich in diesem .container-Element befinden.
Mir ist aufgefallen, dass Folgendes nicht funktioniert. Irgendwelche Gedanken oder Workarounds?
Ich habe dasselbe Problem.
Ich möchte das Kindelement eines Geschwisterelements stylen.
Haben Sie schon eine Antwort gefunden?
Funktioniert es nicht, weil Sie die Klasse .p anstelle des Elements p auswählen?
Hallo WilliC,
Das war ein Tippfehler, aber es funktioniert immer noch nicht. Ich glaube, es sucht nach einem direkten Geschwisterelement, daher funktioniert Folgendes nicht
aber Folgendes funktioniert
TK, ich glaube, dies wird ein
span-Kind einesdiv-Geschwisters von.body-class pauswählen@Rob Y
Ich weiß, das ist über ein Jahr her, aber ich antworte für den Fall, dass andere es lesen.
Ich denke, es liegt daran, dass .body-class p + .body-class img technisch gesehen nicht direkt nebeneinander liegen.
Dies wäre korrekt
.body-class p + img
Sie haben wahrscheinlich keine andere .body-class, die direkt auf p folgt, daher glaube ich nicht, dass es korrekt ausgewählt wird.