Die Suche nach dem ~
Charakter ist nicht einfach. Ich habe mir CSS angesehen und dies gefunden
.check:checked ~ .content {
}
Was bedeutet das?
css
css-selectors
Akshat
quelle
quelle
>
ist für nur zitiert , ist es nie für andere Zwecke verwendet werden. Sie sollten auch keine Namen von zufälligen Technologien in der Frage fett schreiben. Über Tags können wir sehen, welche Technologien relevant sind.Antworten:
Der
~
Selektor ist in der Tat der Allgemeine Geschwisterkombinator (in Selektorstufe 4 in Nachgeschwisterkombinator umbenannt ):Betrachten Sie das folgende Beispiel:
.a ~ .b
stimmt mit dem 4. und 5. Listenelement überein, weil sie:.b
Elemente.a
.a
in der HTML-Quellreihenfolge.Entspricht ebenfalls
.check:checked ~ .content
allen.content
Elementen, die Geschwister von sind.check:checked
und danach erscheinen.quelle
.parent > *
?Gut, um auch die anderen Kombinatoren in der Familie zu überprüfen und zu dem zurückzukehren, was dieser spezielle ist.
ul li
ul > li
ul + ul
ul ~ ul
Beispiel-Checkliste:
ul li
- im Inneren der Suche - Wählt alle dieli
Elemente platziert (überall) im Inneren derul
; Nachkommen Selektorul > li
- Blick nach innen - Wählt nur die direktenli
Elemente vonul
; dh es werden nur direkte Kinderli
von ausgewähltul
; Child Selector oder Child Combinator Selectorul + ul
- Nach draußen schauen - Wählt dasul
unmittelbar folgende ausul
; Es schaut nicht nach innen, sondern nach außen nach dem unmittelbar folgenden Element; Angrenzender Geschwister-Selektorul ~ ul
- Nach draußen schauen - Wählt alleul
folgendenul
Elemente aus, unabhängig davon, wo sie sich befinden. Beideul
sollten jedoch denselben Elternteil haben. Allgemeine GeschwisterauswahlDas, was wir hier sehen, ist General Sibling Selector
quelle
Allgemeiner Geschwisterkombinator
Mehr Info
quelle
Es ist
General sibling combinator
und wird in @ Salamans Antwort sehr gut erklärt.Was ich vermisst habe ist,
Adjacent sibling combinator
was+
eng damit verbunden ist und ist~
.Beispiel wäre
.b
.a
.a
in HTMLIm obigen Beispiel wird der 2.,
li
aber nicht der 4. Punkt markiert .JSFiddle
quelle
Beachten Sie, dass in einem Attributselektor (z. B.
[attr~=value]
) die Tilde angezeigt wirdhttps://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
quelle