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


Chercher le ~ le personnage n'est pas facile. Je regardais des CSS et j'ai trouvé ça

.check:checked ~ .content {
}

Qu'est-ce que ça veut dire?


662
2018-05-28 09:10


origine


Réponses:


le ~ le sélecteur est en fait le Combinateur général de fratrie (renommé en combinateur frère / sœur suivant dans sélecteurs Niveau 4):

Le combinateur général est composé du "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 le   arbre de document 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.

Considérez 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 aux 4ème et 5ème éléments de la liste car ils:

  • Sont .b éléments
  • Sont frères et soeurs de .a
  • Apparaître après .a dans l'ordre des sources HTML.

Également, .check:checked ~ .content correspond à tous .content éléments qui sont frères et sœurs de .check:checked et apparaissent après.


1097
2018-05-28 09:29



Combinateur général de fratrie

Le sélecteur général du combinateur de fratrie est très similaire au sélecteur combinatoire frère / sœur adjacent. La différence est que l'élément sélectionné n'a pas besoin de succéder immédiatement au premier élément, mais peut apparaître n'importe où après lui.

Plus d'informations


168
2018-05-28 09:11



Bon pour vérifier également l'autre combinateurs dans la famille et de revenir à ce qui est spécifique.

  • ul li
  • ul > li
  • ul + ul 
  • ul ~ ul

Exemple de liste de contrôle:

  • ul li - Regardant à l'intérieur - Sélectionne tout la li éléments placés (n'importe où) à l'intérieur du ul; Sélecteur descendant
  • ul > li - Regardant à l'intérieur - Sélectionne seulement le direct  li des éléments de ul; c'est-à-dire qu'il ne sélectionnera que des enfants directs li de ul; Sélecteur d'enfant ou Sélecteur combinateur enfant
  • ul + ul - Regarder dehors - Sélectionne le ul immédiatement après ul; Il ne regarde pas à l'intérieur, mais regarde dehors pour l'élément immédiatement suivant; Sélecteur de sibling adjacent
  • ul ~ ul - Regarder dehors - Sélectionne tous les ul qui suit le ul peu importe où c'est, mais les deux ul devrait avoir le même parent; Sélecteur général de fratrie

Celui que nous regardons ici est Sélecteur général de fratrie


111
2017-09-16 21:46



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 lequel est + et est étroitement liée à ~.

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 aux éléments qui sont .b 
  • Sont adjacents à .a
  • Après .a en HTML

Dans l'exemple ci-dessus, il marquera 2ème li mais pas 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


25
2017-07-06 10:42



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

Représente un élément avec un nom d'attribut 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


2
2018-01-24 19:45