¿Qué significa el selector CSS "~" (tilde / squiggle / twiddle)?

Buscar el ~personaje no es fácil. Estaba mirando un poco de CSS y encontré esto

.check:checked ~ .content {
}

Qué significa eso?

De ~hecho, el selector es el combinador de hermanos general (renombrado como combinador de hermanos posteriores en los selectores de nivel 4 ):

El combinador de hermanos general está hecho del carácter "tilde" (U + 007E, ~) que separa dos secuencias de selectores simples. Los elementos representados por las dos secuencias comparten el mismo padre en el árbol del documento y el elemento representado por la primera secuencia precede (no necesariamente inmediatamente) al elemento representado por la segunda.

Considere el siguiente ejemplo:

.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 coincide con el cuarto y quinto elemento de la lista porque:

• Son .belementos
• Son hermanos de .a
• Aparecer después .aen orden de origen HTML.

Del mismo modo, .check:checked ~ .contentcoincide con todos los .contentelementos que son hermanos .check:checkedy aparecen después de él.

Es bueno verificar también los otros combinadores de la familia y volver a cuál es este específico.

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

Ejemplo de lista de verificación:

• ul li- Mirar hacia adentro : selecciona todos los lielementos colocados (en cualquier lugar) dentro de ul; Selector descendiente
• ul > li- Mirar hacia adentro : selecciona solo los li elementos directos de ul; es decir, solo seleccionará hijos directos lide ul; Selector de niños o selector de combinador de niños
• ul + ul- Mirar hacia afuera : selecciona el ulsiguiente inmediatamente ul; No está mirando hacia adentro, sino mirando hacia afuera para el elemento inmediatamente siguiente; Selector de hermanos adyacentes
• ul ~ ul- Mirar hacia afuera : selecciona todo lo ulque sigue ul, no importa dónde esté, pero ambos uldeben tener el mismo padre; Selector general de hermanos

El que estamos viendo aquí es el Selector general de hermanos

Combinador general de hermanos

El selector general del combinador de hermanos es muy similar al selector adyacente del combinador de hermanos. La diferencia es que el elemento que se selecciona no necesita suceder inmediatamente al primer elemento, sino que puede aparecer en cualquier lugar después de él.

Más información

Está General sibling combinatory se explica muy bien en la respuesta de @ Salaman.

Lo que sí extrañé es Adjacent sibling combinatorcuál está +y está estrechamente relacionado ~.

ejemplo sería

.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>

• Coincide con elementos que son .b
• Son adyacentes a .a
• Después .aen HTML

En el ejemplo anterior marcará el 2do lipero no el 4to.

   .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

Tenga en cuenta que en un selector de atributos (por ejemplo, [attr~=value]), la tilde

Representa un elemento con un nombre de atributo de atributo cuyo valor es una lista de palabras separadas por espacios en blanco, una de las cuales es exactamente el valor .

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