Che cosa significa il selettore CSS "~" (tilde / squiggle / twiddle)?

Cercare il ~personaggio non è facile. Stavo guardando alcuni CSS e ho trovato questo

.check:checked ~ .content {
}

Cosa significa?

Il ~selettore è in effetti il combinatore di fratelli generali (ribattezzato combinatore di fratelli successivi in selettori di livello 4 ):

Il combinatore di fratelli generali è composto dal carattere "tilde" (U + 007E, ~) che separa due sequenze di selettori semplici. Gli elementi rappresentati dalle due sequenze condividono lo stesso genitore nella struttura del documento e l'elemento rappresentato dalla prima sequenza precede (non necessariamente immediatamente) l'elemento rappresentato dalla seconda.

Considera il seguente esempio:

.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 corrisponde alla quarta e quinta voce dell'elenco perché:

• Sono .belementi
• Sono fratelli di .a
• Appare dopo .ain ordine sorgente HTML.

Allo stesso modo, .check:checked ~ .contentcorrisponde a tutti gli .contentelementi di cui sono fratelli .check:checkede compaiono dopo di esso.

Buono anche a controllare gli altri combinatori della famiglia e tornare a quello che è questo specifico.

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

Elenco di controllo di esempio:

• ul li- Guardando dentro - Seleziona tutti gli lielementi posizionati (ovunque) all'interno del ul; Selettore discendente
• ul > li- Guardando dentro - Seleziona solo gli li elementi diretti di ul; cioè selezionerà solo i figli diretti lidi ul; Selettore figlio o selettore combinatore figlio
• ul + ul- Guardare fuori - Seleziona il ulimmediatamente successivo al ul; Non sta guardando dentro, ma cerca all'esterno l'elemento immediatamente successivo; Selettore fratello adiacente
• ul ~ ul- Guardare fuori - Seleziona tutto ciò ulche segue ulnon importa dove si trova, ma entrambi uldovrebbero avere lo stesso genitore; Selettore generale di fratelli

Quello che stiamo osservando qui è il General Sibling Selector

Combinatore di pari livello generale

Il selettore combinatore di fratelli generali è molto simile al selettore combinatore di fratelli adiacente. La differenza è che l'elemento selezionato non ha bisogno di avere immediatamente successo al primo elemento, ma può apparire ovunque dopo di esso.

Ulteriori informazioni

È General sibling combinatored è spiegato molto bene nella risposta di @ Salaman.

Quello che mi è mancato è Adjacent sibling combinatorche è +ed è strettamente correlato ~.

esempio sarebbe

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

• Abbina gli elementi che lo sono .b
• Sono adiacenti a .a
• Dopo .ain HTML

Nell'esempio sopra segnerà il 2o lima non il 4o.

   .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

Si noti che in un selettore di attributi (ad esempio, [attr~=value]), la tilde

Rappresenta un elemento con un nome di attributo di attr il cui valore è un elenco di parole separato da spazi bianchi, uno dei quali è esattamente valore .

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