1. Os seletores irmãos comuns CSS referem-se a todos os elementos conectados a outro elemento, ambos com o mesmo elemento pai.
2. O seletor de irmãos comuns usa o til (~) como símbolo de combinação para irmãos comuns.
Exemplo
<!DOCTYPEhtml>
<html>
<cabeça>
<meta charset="UTF-8">
<meta name="viewport" content="largura=largura do dispositivo, escala inicial=1,0">
<title>Seletor de irmãos comum</title>
<estilo>
.ancestral {
largura: 500px;
altura: 300px;
}
.pai {
largura: 300px;
altura: 200px;
}
.criança {
largura: 200px;
altura: 100px;
}
/* Posiciona o elemento cujo irmão é div depois de .child1*/
.child1 ~ div {
cor de fundo: lightcoral;
}
</estilo>
</head>
<corpo>
<div>
este é ancestral.
<div>
este é o pai.
<div>este é filho0.</div>
<div>este é o filho1.</div>
<div>este é o filho2.</div>
<div>este é o filho3.</div>
</div>
</div>
</body>
</html>
O que foi dito acima é a compreensão do seletor de irmãos comum CSS, espero que seja útil para todos.
Mais guia de aprendizagem de CSS: tutorial de CSS