Co oznacza selektor CSS " ~ " (tilde/squiggle/twiddle)?

Wyszukiwanie postaci ~ nie jest łatwe. Przeglądałem jakiś CSS i znalazłem to 

.check:checked ~ .content {
}
Co to znaczy?
Author: TylerH, 2012-05-28
Source

5 answers

Selektor

~ jest w rzeczywistości ogólny kombinator rodzeństwa (przemianowany na następny-kombinator rodzeństwa na poziomie selektorów 4):

Ogólny kombinator rodzeństwa jest wykonany z "tyldy" (U+007E, ~) znak, który oddziela dwie sekwencje prostych selektorów. Na elementy reprezentowane przez dwie sekwencje mają ten sam rodzic w drzewo dokumentu i element reprezentowany przez pierwszą sekwencję poprzedza (niekoniecznie od razu) element reprezentowany przez drugi.

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ą .b elementami
  • są rodzeństwem .a
  • pojawiają się po .a w kolejności źródeł HTML.

Podobnie, .check:checked ~ .content dopasowuje wszystkie .content elementy, które są rodzeństwem .check:checked i pojawiają się po nim.

 1117
Author: Salman A,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-01 15:49:23

General sibling combinator

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

Więcej informacji

 168
Author: Rohit Azad,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-08-21 21:43:15

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 - Looking inside - wybiera wszystkie li elementy umieszczone (w dowolnym miejscu) wewnątrz ul; Selektor Potomków
  • ul > li - Looking inside - Selects tylko bezpośredni li elementy ul; tzn. wybierze tylko bezpośrednie dzieci li z ul; Selektor Dla Dzieci lub Selektor dla dzieci
  • ul + ul - patrząc na zewnątrz - zaznacza ul bezpośrednio po ul; nie zagląda do środka, ale na zewnątrz w poszukiwaniu bezpośrednio następującego elementu; sąsiadujący Selektor rodzeństwa
  • ul ~ ul - patrząc na zewnątrz - wybiera wszystkie ul co następuje po ul nie ma znaczenia, gdzie jest, ale oba ul powinny mieć tego samego rodzica; ogólny Selektor rodzeństwa

Ten, na który tu patrzymy, to ogólny Selektor rodzeństwa

 113
Author: Lijo Joseph,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-12-25 17:26:27

Jest to General sibling combinator i jest bardzo dobrze wyjaśnione w odpowiedzi @ Salaman.

Brakowało mi Adjacent sibling combinator, która jest + i jest ściśle związana z ~.

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>
  • dopasowuje elementy, które są .b
  • sąsiadują z .a
  • Po .a W HTML

W powyższym przykładzie oznacza 2nd li, ale nie 4th.

   .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

 27
Author: Matas Vaitkevicius,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-09-24 14:14:15

Zauważ, że w selektorze atrybutów (np. [data-components~=wheels]) tylda

Reprezentuje element z nazwą atrybutu attr, którego wartością jest oddzielona białymi znakami lista słów, z których jeden jest dokładnie wartością.

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

 3
Author: Ian Hunter,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-01-24 19:45:52