Zoeken naar het teken ~is niet eenvoudig. Ik was wat CSS aan het bekijken en vond dit
.check:checked ~ .content {
}
Wat betekent het?
Antwoord 1, autoriteit 100%
De ~selector is in feite de Algemene broer/zus combinator(omgedoopt tot Combinator voor latere broers en zussen in selectors Niveau 4):
De algemene broer/zus combinator is gemaakt van de “tilde” (U+007E, ~)
teken dat twee reeksen eenvoudige selectors scheidt. De
elementen vertegenwoordigd door de twee reeksen delen dezelfde ouder in de
documentboom en het element vertegenwoordigd door de eerste reeks
gaat vooraf aan (niet noodzakelijkerwijs onmiddellijk) het element vertegenwoordigd door de
tweede.
Beschouw het volgende voorbeeld:
.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>Antwoord 2, autoriteit 17%
Goed om ook de andere combinatorsin het gezin en om terug te komen op wat dit specifieke is.
ul liul > liul + ulul ~ ul
Voorbeeld checklist:
ul li– Binnenkijken– Selecteert allede geplaatstelielementen (overal) binnen deul; Afstammelingenkiezerul > li– Binnenkijken– Selecteert alleen de directelielementen vanul; d.w.z. het selecteert alleen directe kinderenlivanul; Kinderselectieof Kindercombinatieselectorul + ul– Naar buiten kijken– Selecteert deuldirect na deul; Het is niet naar binnen kijken, maar naar buiten kijken naar het direct volgende element; Aangrenzende broer/zus-kiezerul ~ ul– Buiten kijken– Selecteert alleuldie volgen op deulmaakt niet uit waar het is, maar beideulzouden dezelfde ouder moeten hebben; Algemene broer/zus-kiezer
Degene die we hier bekijken is Algemene Sibling Selector
Antwoord 3, autoriteit 12%
Algemene combinator voor broers en zussen
De algemene broer/zus combinator selector lijkt erg op de aangrenzende broer/zus combinator selector. Het verschil is dat het geselecteerde element niet onmiddellijk op het eerste element hoeft te volgen, maar overal daarna kan verschijnen.
Antwoord 4, autoriteit 2%
Het is General sibling combinatoren wordt heel goed uitgelegd in het antwoord van @Salaman.
Wat ik wel heb gemist is Adjacent sibling combinatordie +is en nauw verwant is aan ~.
voorbeeld zou zijn
.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>
- Komt overeen met elementen die
.b - Zijn naast
.a - Na
.ain HTML
. zijn
In het bovenstaande voorbeeld markeert het de 2e limaar niet de 4e.
.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>Antwoord 5
Merk op dat in een kenmerkselector (bijv. [attr~=value]), de tilde
Vertegenwoordigt een element met de attribuutnaam attrwaarvan de waarde een door spaties gescheiden lijst van woorden is, waarvan er één exact valueis.
https://developer.mozilla.org/en-US/ docs/Web/CSS/Attribute_selectors