web-dev-qa-db-fra.com

Que signifie le symbole tilde (~) en CSS

Je veux savoir ce que signifie (~) dans css.

#img1:hover ~ #img2 {
    opacity: 0;
}

Dans Visual Studio, j'obtiens l'erreur "séquence de caractères inattendue" lorsque j'utilise ce symbole. quelle est la signification réelle de cela en CSS. Qu'est ce que ça fait?

csstilde
46
Monie corleone

http://www.w3.org/TR/selectors/

8.3.2. Combinateur général de frères et sœurs

Le combinateur frère général est constitué du caractère "tilde" (U + 007E, ~) qui sépare deux séquences de sélecteurs simples. Les éléments représentés par les deux séquences partagent le même parent dans l'arborescence 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 la seconde.

exemple 

h1 ~ pre

correspond à ce <pre> ici:

<h1>Definition of the function a</h1>
<p>Function a(x) has to be applied to all figures in the table.</p>
<pre>function a(x) = 12x/13.5</pre>

Il y a aussi + sélecteur, pour le combinateur frère adjacent: avec h1 + pre le <pre> la balise devrait être juste après <h1>

52
MarcinJuraszek

Il applique le style à tous les éléments correspondant au deuxième sélecteur s'ils apparaissent après les éléments correspondant au premier sélecteur. Par exemple, étant donné un extrait HTML et une règle CSS:

hr ~ p {
    font-weight: bold;
}
<p>Line one</p>
<hr />
<p>Line two</p>
<p>Line three</p>

seulement <p>Line two</p> et <p>Line three</p> apparaîtra en gras. Dans votre exemple, je pense que Visual Studio a un problème d'interprétation du :hover modificateur, car ce n'est pas vraiment un élément. Si vous le supprimez de la règle, cela peut fonctionner correctement.

21
Neil T.