Poszukiwanie ~
postaci nie jest łatwe. Przeglądałem CSS i znalazłem to
.check:checked ~ .content {
}
Co to znaczy?
css
css-selectors
Akszat
źródło
źródło
>
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.Odpowiedzi:
~
Selektor jest w rzeczywistości ogólne syntezatora rodzeństwo (przemianowany na Późniejsza-rodzeństwem combinator w selektorów poziom 4 ):Rozważ następujący przykład:
.a ~ .b
pasuje do 4. i 5. pozycji listy, ponieważ:.b
elementami.a
.a
w kolejności źródłowej HTML.Podobnie,
.check:checked ~ .content
dopasowuje wszystkie.content
elementy, które są rodzeństwem.check:checked
i pojawiają się po nim.źródło
.parent > *
?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 teli
elementy umieszczone (gdziekolwiek) wewnątrzul
; Selektor potomkówul > li
- Zajrzyj do środka - Wybiera tylko bezpośrednieli
elementyul
; czyli będzie wybrać tylko bezpośrednie dziecili
zul
; Selektor dziecka lub Selektor dzieckaul + ul
- Patrząc na zewnątrz - Wybieraul
natychmiast następująceul
; Nie patrzy do wewnątrz, ale szuka na zewnątrz elementu, który następuje bezpośrednio; Selektor sąsiedniego rodzeństwaul ~ ul
- Patrzenie na zewnątrz - Wybiera wszystko,ul
co następuje,ul
nie ma znaczenia, gdzie to jest, ale obaul
powinny mieć tego samego rodzica; Generalny Selektor RodzeństwaTen, na który patrzymy, to Selektor generalny rodzeństwa
źródło
Ogólny kombinator rodzeństwa
Więcej informacji
źródło
Jest to
General sibling combinator
bardzo dobrze wyjaśnione w odpowiedzi @ Salamana.Tęskniłem za tym,
Adjacent sibling combinator
co jest+
i jest ściśle związane~
.przykładem może być
.b
.a
.a
w HTMLW powyższym przykładzie będzie oznaczać 2.,
li
ale nie 4..JSFiddle
źródło
Zauważ, że w selektorze atrybutów (np.
[attr~=value]
) Tyldahttps://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
źródło