Diferença entre ~e +

Oi Walter, tudo bem? Até onde sei, a diferença é a seguinte:

Os dois selecionam elementos do tipo irmãos, ou seja, estão dentro da mesma nível hierárquico, a diferença é que no + não podemos ter elementos entre os alvos e no ~ nós podemos.

Entende? O ~ só se importa com o nível hierárquico, enquanto o + se importa se além disso, os elementos são adjacentes.

li + li ---> (Após qualquer tag <li>, seleciona a próxima tag irmã se ela for uma tag <li>)

li ~ li ---> (Após qualquer tag <li>, seleciona todas as tags irmãs que são do tipo <li>)

img + li ---> (Após qualquer tag <img>, seleciona a próxima tag irmã se ela for uma tag <li>)

img ~ li ---> (Após qualquer tag <img>, seleciona todas as tags irmãs que são do tipo <li>)

Obviamente, tags irmãs são aquelas que têm a mesma tag pai.

<div>1 // é pai de 2 e 3 e avô de 4 e 5

    <p>2</p> // é irmã de 3

    <a>3 // é irmã de 2 e pai de 4 e 5

        <img>4</img> // é irmã de 5
        <p>5</p> // é irmã de 4

    </a>

</div>