Was bedeutet der CSS-Selektor „~“ (Tilde / Squiggle / Twiddle)?

857

Die Suche nach dem ~Charakter ist nicht einfach. Ich habe mir CSS angesehen und dies gefunden

.check:checked ~ .content {
}

Was bedeutet das?

Akshat
quelle
3
Überprüfen Sie die Demo, die Sie verstehen werden Hier ist eine Liste von CSS-Selektoren
Dipak
@ TylerH, das wird sehr häufig in Stack Overflow-Posts verwendet. Bitte nehmen Sie es ruhig, ich wollte nicht, dass es sich schlechter anfühlt.
Arsen Khachaturyan
@ArsenKhachaturyan Vielleicht missverstehen Sie; Die Blockzitatsyntax dient zum Anzeigen eines Zitats , wenn ein Benutzer angibt, dass etwas (Text, Bild, Code usw.) nicht seine eigene Arbeit oder sein eigenes Wort ist, sondern von einem anderen Ort kopiert wird. Wie jede Formatierung hat es einen semantischen Zweck; Es ist nicht etwas, das man wohl oder übel hinzufügen kann. Fügen Sie den Wörtern ebenfalls keine zufällige fette Hervorhebung hinzu. Es sollte sparsam zur Hervorhebung verwendet werden.
TylerH
@ TylerH Ich verstehe, dass der Name "Zitat" ist und auch, was das "Zitat" selbst bedeutet. Wenn Sie jedoch wirklich Fragen von gewöhnlichem Text unterscheiden möchten, können Sie einige Hervorhebungstechniken ausprobieren, wie ich es getan habe. Für Fettdruck ist es auch naheliegend, wenn Sie Dinge wie Schlüsselwörter oder bekannte Begriffe hervorheben möchten. Normalerweise mag ich es nicht, wenn Leute aus unbekannten Gründen Fettdruck verwenden, aber manchmal kann es verwendet werden, damit Leute leicht themenbezogene Informationen finden.
Arsen Khachaturyan
@ArsenKhachaturyan Bitte tu das nicht. >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.
meagar

Antworten:

1370

Der ~Selektor ist in der Tat der Allgemeine Geschwisterkombinator (in Selektorstufe 4 in Nachgeschwisterkombinator umbenannt ):

Der allgemeine Geschwisterkombinator besteht aus dem Zeichen "Tilde" (U + 007E, ~), das zwei Sequenzen einfacher Selektoren trennt. Die durch die beiden Sequenzen dargestellten Elemente haben im Dokumentbaum dasselbe übergeordnete Element, und das durch die erste Sequenz dargestellte Element steht (nicht unbedingt unmittelbar) vor dem durch die zweite dargestellten Element.

Betrachten Sie das folgende Beispiel:

.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 stimmt mit dem 4. und 5. Listenelement überein, weil sie:

  • Sind .bElemente
  • Sind Geschwister von .a
  • Erscheint danach .ain der HTML-Quellreihenfolge.

Entspricht ebenfalls .check:checked ~ .contentallen .contentElementen, die Geschwister von sind .check:checkedund danach erscheinen.

Salman A.
quelle
13
"Nicht unbedingt sofort" ist der Schlüsselteil dieser Beschreibung.
PanicBus
1
Gibt es auch einen Selektor für alle Elemente mit demselben übergeordneten Element?
Nick N.
1
@ NickN. Sie bedeuten .parent > *?
Salman A
@ SalmanA nicht genau, ich hatte gehofft, es gibt einen Selektor, den Sie verwenden können, wenn Sie die Eltern nicht kennen.
Nick N.
7
@ NickN.Nein gibt es nicht. CSS wird mit dem Vorschlag erstellt, dass der CSS-Parser niemals in das DOM zurückblickt, um eine Übereinstimmung herzustellen. Dies ist der gleiche Grund, warum es keinen übergeordneten Selektor gibt.
Yunzen
191

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 die liElemente platziert (überall) im Inneren der ul; Nachkommen Selektor
  • ul > li- Blick nach innen - Wählt nur die direkten li Elemente von ul; dh es werden nur direkte Kinder livon ausgewählt ul; Child Selector oder Child Combinator Selector
  • ul + ul- Nach draußen schauen - Wählt das ulunmittelbar folgende aus ul; Es schaut nicht nach innen, sondern nach außen nach dem unmittelbar folgenden Element; Angrenzender Geschwister-Selektor
  • ul ~ ul- Nach draußen schauen - Wählt alle ulfolgenden ulElemente aus, unabhängig davon, wo sie sich befinden. Beide ulsollten jedoch denselben Elternteil haben. Allgemeine Geschwisterauswahl

Das, was wir hier sehen, ist General Sibling Selector

Lijo Joseph
quelle
2
Dieser machte am meisten Sinn. Laien Terminologie zur Rettung wieder. Jetzt kann ich die technische Dokumentation lesen.
TheRealChx101
2
Gibt es einen Geschwister-Selektor für ALLE Geschwister, nicht nur für die folgenden?
Elijah Mock
1
@ EliTheHuman, nein. Weitere Informationen finden Sie in diesem SO-Beitrag - stackoverflow.com/a/11813469/6830901
Lijo Joseph
174

Allgemeiner Geschwisterkombinator

Der allgemeine Geschwisterkombinator-Selektor ist dem benachbarten Geschwisterkombinator-Selektor sehr ähnlich. Der Unterschied besteht darin, dass das ausgewählte Element nicht sofort dem ersten Element folgen muss, sondern an einer beliebigen Stelle danach angezeigt werden kann.

Mehr Info

Rohit Azad
quelle
31

Es ist General sibling combinatorund wird in @ Salamans Antwort sehr gut erklärt.

Was ich vermisst habe ist, Adjacent sibling combinatorwas +eng damit verbunden ist und ist ~.

Beispiel wäre

.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>
  • Entspricht Elementen, die sind .b
  • Sind neben .a
  • Nach .ain HTML

Im obigen Beispiel wird der 2., liaber nicht der 4. Punkt markiert .

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