Co oznacza selektor CSS „~” (tylda / squiggle / twiddle)?

Poszukiwanie ~postaci nie jest łatwe. Przeglądałem CSS i znalazłem to

.check:checked ~ .content {
}

Co to znaczy?

~Selektor jest w rzeczywistości ogólne syntezatora rodzeństwo (przemianowany na Późniejsza-rodzeństwem combinator w selektorów poziom 4 ):

Ogólny kombinator rodzeństwa składa się ze znaku „tylda” (U + 007E, ~), który oddziela dwie sekwencje prostych selektorów. Elementy reprezentowane przez dwie sekwencje mają tego samego rodzica w drzewie dokumentu, a element reprezentowany przez pierwszą sekwencję poprzedza (niekoniecznie natychmiast) element reprezentowany przez drugą.

Rozważ następujący przykład:

.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 pasuje do 4. i 5. pozycji listy, ponieważ:

• Są .belementami
• Czy rodzeństwo .a
• Pojawiają się po .aw kolejności źródłowej HTML.

Podobnie, .check:checked ~ .contentdopasowuje wszystkie .contentelementy, które są rodzeństwem .check:checkedi pojawiają się po nim.

Dobrze jest również sprawdzić inne kombinatory w rodzinie i wrócić do tego, co jest tym konkretnym.

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

Przykładowa lista kontrolna:

• ul li- Patrząc wewnątrz - Wybiera wszystkie te lielementy umieszczone (gdziekolwiek) wewnątrz ul; Selektor potomków
• ul > li- Zajrzyj do środka - Wybiera tylko bezpośrednie li elementy ul; czyli będzie wybrać tylko bezpośrednie dzieci liz ul; Selektor dziecka lub Selektor dziecka
• ul + ul- Patrząc na zewnątrz - Wybiera ulnatychmiast następujące ul; Nie patrzy do wewnątrz, ale szuka na zewnątrz elementu, który następuje bezpośrednio; Selektor sąsiedniego rodzeństwa
• ul ~ ul- Patrzenie na zewnątrz - Wybiera wszystko, ulco następuje, ulnie ma znaczenia, gdzie to jest, ale oba ulpowinny mieć tego samego rodzica; Generalny Selektor Rodzeństwa

Ten, na który patrzymy, to Selektor generalny rodzeństwa

Ogólny kombinator rodzeństwa

Ogólny selektor kombinacji rodzeństwa jest bardzo podobny do sąsiedniego selektora kombinacji rodzeństwa. Różnica polega na tym, że wybrany element nie musi natychmiast sukcesować pierwszego elementu, ale może pojawić się w dowolnym miejscu po nim.

Więcej informacji

Jest to General sibling combinatorbardzo dobrze wyjaśnione w odpowiedzi @ Salamana.

Tęskniłem za tym, Adjacent sibling combinatorco jest +i jest ściśle związane ~.

przykładem może być

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

• Pasuje do elementów, które są .b
• Sąsiednie z .a
• Po .aw HTML

W powyższym przykładzie będzie oznaczać 2., liale nie 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

Zauważ, że w selektorze atrybutów (np. [attr~=value]) Tylda

Reprezentuje element o nazwie atrybutu attr, którego wartością jest lista słów oddzielona spacjami, z których jedno jest dokładnie wartością .

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