1. Gewöhnliche CSS-Geschwisterselektoren beziehen sich auf alle Elemente, die mit einem anderen Element verbunden sind und beide dasselbe übergeordnete Element haben.
2. Der Selektor für gewöhnliche Brüder verwendet die Tilde (~) als Kombinationssymbol für gewöhnliche Brüder.
Beispiel
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gemeinsamer Geschwisterselektor</title>
<Stil>
.ancestor {
Breite: 500px;
Höhe: 300px;
}
.parent {
Breite: 300px;
Höhe: 200px;
}
.Kind {
Breite: 200px;
Höhe: 100px;
}
/* Positioniere das Element, dessen Geschwister div ist, nach .child1*/
.child1~div {
Hintergrundfarbe: helles Koralle;
}
</style>
</head>
<Körper>
<div>
das ist Vorfahr.
<div>
Das ist Eltern.
<div>das ist child0.</div>
<div>das ist kind1.</div>
<div>das ist kind2.</div>
<div>das ist child3.</div>
</div>
</div>
</body>
</html>
Das Obige ist das Verständnis des gewöhnlichen CSS-Geschwisterselektors. Ich hoffe, es wird für alle hilfreich sein.
Weitere CSS-Lernanleitungen: CSS-Tutorial