Que signifie le sélecteur CSS " ~ " (tilde/squiggle/twiddle)?

Question

Que signifie le sélecteur CSS " ~ " (tilde/squiggle/twiddle)?

chercher le caractère ~ n'est pas facile. Je cherchais quelques CSS et j'ai trouvé ce

.check:checked ~ .content {
}

ça veut dire Quoi?

675

css css-selectors css3

demandé sur TylerH 2012-05-28 13:10:00

5 réponses

score 1117 · Answer 1

le sélecteur ~ est en fait le combinateur général pour frères et sœurs (renommé en combinateur pour frères et sœurs subséquents dans sélecteurs Niveau 4 ):

le combinateur général est fait de la "tilde" (U+007E, ~) caractère qui sépare deux séquences de sélecteurs simples. Le les éléments représentés par les deux séquences partagent le même parent dans l' arbre de documents et l'élément représenté par la première séquence précède (pas nécessairement immédiatement) l'élément représenté par le deuxième.

prenons l'exemple suivant:

.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 correspond à la 4ème et la 5ème liste parce qu'ils:

Sont .b éléments
sont frères et sœurs de .a
apparaît après .a dans L'ordre des sources HTML.

de même, .check:checked ~ .content correspond à tous les éléments .content qui sont des frères et sœurs de .check:checked et apparaissent après elle.

score 168 · Answer 2

combinateur général pour frères et sœurs

le sélecteur combiné général est très similaire au sélecteur combiné adjacent. La différence est que l'élément sélectionné n'a pas besoin de succéder immédiatement le premier élément, mais peut apparaître n'importe où, d'après elle.

plus d'info

score 113 · Answer 3

bon pour vérifier aussi l'autre combinateurs dans la famille et pour revenir à ce qui est celui-ci spécifique.

ul li
ul > li
ul + ul
ul ~ ul

exemple de liste de contrôle:

ul li - regarder à l'intérieur - sélectionne tous les éléments li placés (n'importe où) à l'intérieur du ul ; sélecteur Descendant
ul > li - en regardant à l'intérieur - sélectionne seulement le direct li éléments de ul ; c.-à-d. qu'il sélectionnera seulement les enfants directs li de ul ; enfant Sélecteur ou sélecteur de combinateur pour enfants
ul + ul - en regardant à l'extérieur - sélectionne le ul immédiatement après le ul ; il ne regarde pas à l'intérieur, mais cherche à l'extérieur l'élément immédiatement suivant; sélecteur de frère ou de Sœur Adjacent
ul ~ ul - regarder à l'extérieur - sélectionne tout le ul qui suit le ul n'importe pas où il est, mais les deux ul devraient avoir le même parent; General Sibling Selector

celui que nous regardons ici est sélecteur général de frères et sœurs

score 27 · Answer 4

c'est General sibling combinator et est très bien expliqué dans la réponse de @Salaman.

ce que j'ai manqué est Adjacent sibling combinator qui est + et est étroitement lié à ~ .

exemple serait

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

correspond à des éléments qui sont .b
sont adjacents à .a
après .a en HTML

dans l'exemple ci-dessus il marquera la 2ème li mais pas la 4ème.

   .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

score 3 · Answer 5

noter que dans un sélecteur d'attribut (par exemple, [data-components~=wheels] ), le tilde

représente un élément avec un attribut de nom d'attr dont la valeur est une liste de mots séparés par des espaces, dont l'un est exactement la valeur.

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

Las etiquetas más populares

Que signifie le sélecteur CSS " ~ " (tilde/squiggle/twiddle)?

5 réponses