En quoi consiste le CSS ~ (tilde/squiggle/manipulation) sélecteur ?

Question

Vous cherchez le `` un caractère n’est pas facile. Je cherchais sur certains css et trouvé ceci

Ce que cela signifie ?

Answer 1

L' ~ sélecteur est en fait le Général frère combinator:

Le grand frère du combinator est le "tilde" (U+007E, ~) caractère qui sépare les deux séquences de sélecteurs simples. L' les éléments représentés par les deux séquences partagent le même parent dans l' document de l'arbre et de l'élément représenté par la première séquence précède (pas forcément tout de suite) de l'élément représenté par la deuxième.

Donc, .check:checked ~ .content correspond à tous .content éléments que sont (i) les frères et sœurs de (ii) apparaissent après un vérifiée .check élément.

---

Considérons le texte suivant:

<div>
    <span class="b">1st</span>
    <span class="a">2nd</span>
    <span>3rd</span>
    <span class="b">4th</span>
    <span class="b">5th</span>
</div>

.a ~ .b des matchs de la 4e et de la 5e travée, parce qu'ils (i) .b éléments (ii) sont des frères et sœurs de l' .a (iii) apparaissent au bout d' .a dans la source HTML de la commande.

Answer 2

Combinateur d’éléments frères générales

Le sélecteur de combinator général frère est très similaire au sélecteur combinator frères adjacents. La différence est que l’élément sélectionné n’a pas besoin de réussir immédiatement le premier élément, mais peut apparaître n’importe où après lui.

Plus d’informations