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

857

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

.check:checked ~ .content {
}

Co to znaczy?

Akszat
źródło
3
Sprawdź wersję demo, którą zrozumiesz Oto lista selektorów CSS
Dipak
@TylerH, to jest coś bardzo często używanego w postach przepełnienia stosu, uspokój się, nie chciałem, żeby to pogorszyło sytuację.
Arsen Khachaturyan
@ArsenKhachaturyan Może źle zrozumiałeś; blokowa składnia cytatu służy do wskazywania cytatu , gdy użytkownik wskazuje, że coś (tekst, obraz, kod itp.) nie jest własną pracą lub słowami, ale jest kopiowane gdzie indziej. Jak każde formatowanie, ma on cel semantyczny; nie jest to coś, co można dodawać chcąc nie chcąc. Podobnie, nie dodawaj losowo pogrubionego wyróżnienia do słów. Powinien być stosowany do podkreślania, oszczędnie.
TylerH
@TylerH Rozumiem, że jego nazwa to „cytat”, a także to, co oznacza „cytat”. Jednak czasami, gdy naprawdę chcesz odróżnić pytania od zwykłego tekstu, możesz wypróbować niektóre techniki podkreślania, tak jak ja. Do pogrubienia oczywiste jest również użycie, gdy chcesz podkreślić rzeczy, takie jak słowa kluczowe lub dobrze znane terminy. Zwykle nie lubię, gdy ludzie używają pogrubienia z nieznanych przyczyn, ale czasem można go łatwo wykorzystać, aby łatwo znaleźć informacje związane z tematem.
Arsen Khachaturyan
@ArsenKhachaturyan Proszę nie rób tego. >służy wyłącznie do cytowania , nigdy nie można jej używać do żadnych innych celów. W pytaniu nie powinieneś również pogrubiać nazw przypadkowych technologii. Za pomocą tagów możemy sprawdzić, które technologie są odpowiednie.
Meagar

Odpowiedzi:

1369

~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ż:

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

Salman A.
źródło
13
„Niekoniecznie natychmiast” jest kluczową częścią tego opisu.
PanicBus
1
Czy istnieje również selektor dla wszystkich elementów z tym samym rodzicem?
Nick N.
1
@NickN. masz na myśli .parent > *?
Salman
@ SalmanA niezupełnie, miałem nadzieję, że istnieje selektor, którego możesz użyć, jeśli nie znasz rodzica.
Nick N.
7
@ NickN.Nie ma. CSS jest tworzony z założeniem, że parser CSS nigdy nie ogląda się w DOM, aby dopasować. Z tego samego powodu nie ma selektora nadrzędnego.
Junzen
191

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

Lijo Joseph
źródło
2
Ten miał najwięcej sensu. Terminologia laika na ratunek ponownie. Teraz mogę przeczytać dokumentację techniczną.
TheRealChx101
2
Czy istnieje selektor rodzeństwa dla WSZYSTKIEGO rodzeństwa, a nie tylko następujące?
Elijah Mock
1
@EliTheHuman, no. Więcej informacji można znaleźć w tym poście SO - stackoverflow.com/a/11813469/6830901
Lijo Joseph
174

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

Rohit Azad
źródło
31

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

Matas Vaitkevicius
źródło