Wenn wir Elemente abgleichen möchten, die unmittelbar nach dem ersten Selektor erscheinen, können wir den benachbarten Geschwisterselektor (+) verwenden. Hier sind beide Selektoren untergeordnete Elemente desselben übergeordneten Elements.
Die Syntax des CSS-Kombinators für angrenzende Geschwister lautet wie folgt:
Selector + Selector{
attribute: /*value*/
}Wenn wir Geschwisterelemente unter demselben übergeordneten Element auswählen möchten, unabhängig von der Position des zweiten ausgewählten Elements, können wir den universellen CSS-Geschwisterselektor verwenden.
Die Syntax des universellen CSS-Geschwisterselektors lautet wie folgt:
Selector ~ Selector{
attribute: /*value*/
}Das folgende Beispiel demonstriert CSS-Eigenschaften für angrenzende und generische Geschwisterselektoren.
Demonstration
<!DOCTYPE html>
<html>
<head>
<style>
#parent {
display: flex;
margin: 2%;
padding: 2%;
box-shadow: inset 0 0 24px cyan;
justify-content: space-around;
}
div + p {
font-size: 1.2em;
font-weight: bold;
background: powderblue;
}
section {
box-shadow: 0 0 3px rgba(0,0,0,0.8);
}
</style>
</head>
<body>
<div id="parent">
<img src="https://i.picsum.photos/id/616/200/200.jpg?hmac=QEzyEzU6nVn4d_vdALhsT9UAtTU
EVhwrT-kM5ogBqKM" />
<div>
<p>Check this</p>
<section><p>Some text in section</p></section>
<span>hello</span>
</div>
<p>Selected</p>
</div>
</body>
</html>Dies führt zu den folgenden Ergebnissen:
Das obige ist der detaillierte Inhalt vonWählen Sie Geschwisterelemente mithilfe von CSS aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
So beheben Sie den HTTP-Request-415-Fehler
Welche Mobiltelefone unterstützt Hongmeng OS?
Was bedeutet Open-Source-Code?
Lösung für die Meldung „Schwarzer Bildschirm' des Computers, fehlendes Betriebssystem
Einführung in die Bedeutung von Cloud-Download-Fenstern
So lösen Sie das Problem, wenn der Computer eingeschaltet wird, der Bildschirm schwarz wird und der Desktop nicht aufgerufen werden kann
Was bedeutet BIOS?
So vergleichen Sie den Dateiinhalt zweier Versionen in Git
