Heim >Web-Frontend >CSS-Tutorial >Wählen Sie Geschwisterelemente mithilfe von CSS aus
Wählen Sie Geschwisterelemente mithilfe von CSS aus
- WBOYnach vorne
- 2023-09-13 09:53:051302Durchsuche
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.
Beispiel
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>Ausgabe
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!