1. Los selectores de hermanos ordinarios de CSS se refieren a todos los elementos conectados a otro elemento y ambos tienen el mismo elemento principal.
2. El selector de hermanos ordinarios utiliza la tilde (~) como símbolo de combinación para los hermanos ordinarios.
Ejemplo
<!DOCTYPE html>
<html>
<cabeza>
<meta juego de caracteres="UTF-8">
<meta nombre="viewport" content="ancho=ancho-dispositivo, escala-inicial=1.0">
<title>Selector de hermanos comunes</title>
<estilo>
.ancestro {
ancho: 500 px;
altura: 300 píxeles;
}
.padre {
ancho: 300px;
altura: 200 píxeles;
}
.niño {
ancho: 200px;
altura: 100 píxeles;
}
/* Colocar el elemento cuyo hermano es div después de .child1*/
.child1~div {
color de fondo: coral claro;
}
</estilo>
</cabeza>
<cuerpo>
<div>
este es el antepasado.
<div>
Este es el padre.
<div>este es child0.</div>
<div>este es niño1.</div>
<div>este es niño2.</div>
<div>este es child3.</div>
</div>
</div>
</cuerpo>
</html>
Lo anterior es la comprensión del selector de hermanos ordinario CSS, espero que sea útil para todos.
Más guía de aprendizaje de CSS: tutorial de CSS