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

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

.check:checked ~ .content {
}

Was bedeutet das?

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.

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

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

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

Beachten Sie, dass in einem Attributselektor (z. B. [attr~=value]) die Tilde angezeigt wird

Stellt ein Element mit dem Attributnamen attr dar, dessen Wert eine durch Leerzeichen getrennte Liste von Wörtern ist, von denen eines genau der Wert ist .

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