O que significa o seletor CSS “~” (til / squiggle / twiddle)?

Procurando pelo ~personagem não é fácil. Eu estava olhando um pouco de CSS e encontrei isso

.check:checked ~ .content {
}

O que isso significa?

De ~fato, o seletor é o combinador geral de irmãos (renomeado para combinador de irmãos subsequentes nos seletores nível 4 ):

O combinador geral de irmãos é composto pelo caractere "til" (U + 007E, ~) que separa duas seqüências de seletores simples. Os elementos representados pelas duas sequências compartilham o mesmo pai na árvore de documentos e o elemento representado pela primeira sequência precede (não necessariamente imediatamente) o elemento representado pela segunda.

Considere o seguinte exemplo:

.a ~ .b {
  background-color: powderblue;
}

<ul>
  <li class="b">1st</li>
  <li class="a">2nd</li>
  <li>3rd</li>
  <li class="b">4th</li>
  <li class="b">5th</li>
</ul>

.a ~ .b corresponde ao quarto e quinto item da lista porque:

• São .belementos
• São irmãos de .a
• Aparecer depois .aem ordem de origem HTML.

Da mesma forma, .check:checked ~ .contentcorresponde a todos os .contentelementos que são irmãos .check:checkede aparecem depois dele.

É bom também verificar os outros combinadores da família e voltar ao que é esse específico.

• ul li
• ul > li
• ul + ul
• ul ~ ul

Exemplo de lista de verificação:

• ul li- Olhando para dentro - Seleciona todos os lielementos colocados (em qualquer lugar) dentro do ul; Seletor descendente
• ul > li- Olhando para dentro - Seleciona apenas os li elementos diretos de ul; isto é, ele selecionará apenas filhos diretos lide ul; Seletor de criança ou seletor combinador filho
• ul + ul- Olhando para fora - Seleciona ulimediatamente após o ul; Não está olhando para dentro, mas olhando para fora para o elemento imediatamente seguinte; Seletor de irmão adjacente
• ul ~ ul- Olhando para fora - Seleciona tudo o ulque segue ul, não importa onde esteja, mas ambos uldevem ter o mesmo pai; Seletor Geral de Irmãos

O que estamos vendo aqui é o Seletor Geral de Irmãos

Combinador geral de irmãos

O seletor combinador de irmãos em geral é muito semelhante ao seletor combinador de irmãos adjacente. A diferença é que o elemento selecionado não precisa ter sucesso imediato no primeiro elemento, mas pode aparecer em qualquer lugar depois dele.

Mais informações

É General sibling combinatore é explicado muito bem na resposta de @ Salaman.

O que eu perdi é o Adjacent sibling combinatorque é +e está intimamente relacionado ~.

exemplo seria

.a + .b {
  background-color: #ff0000;
}

<ul>
  <li class="a">1st</li>
  <li class="b">2nd</li>
  <li>3rd</li>
  <li class="b">4th</li>
  <li class="a">5th</li>
</ul>

• Corresponde a elementos que são .b
• São adjacentes a .a
• Depois .aem HTML

No exemplo acima, marcará o 2º, limas não o 4º.

   .a + .b {
     background-color: #ff0000;
   }

<ul>
  <li class="a">1st</li>
  <li class="b">2nd</li>
  <li>3rd</li>
  <li class="b">4th</li>
  <li class="a">5th</li>
</ul>

JSFiddle

Observe que em um seletor de atributos (por exemplo, [attr~=value]), o til

Representa um elemento com um nome de atributo attr, cujo valor é uma lista de palavras separadas por espaços em branco, uma das quais é exatamente valor .

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors