Che cosa significa tilde symbol (~) in CSS

Question

Voglio sapere che cosa significa (~) in css.

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

In Visual Studio, ricevo l'errore "sequenza caratteri inattesa" quando utilizzo questo simbolo qual è il vero significato di questo in CSS. Che cosa fa?

Answer 1

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

8.3.2. Combinatore di fratelli generici

Il combinatore di fratello generale è costituito dal carattere "tilde" (U + 007E, ~) che separa due sequenze di selettori semplici. Gli elementi rappresentati dalle due sequenze condividono lo stesso elemento padre nell'albero dei documenti e l'elemento rappresentato dalla prima sequenza precede (non necessariamente immediatamente) l'elemento rappresentato dal secondo .

esempio

h1 ~ pre 

partite che <pre> qui:

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

C'è anche + selettore, per adiacente combinatore del fratello: con h1 + pre il tag <pre> dovrebbe essere subito dopo <h1>

Answer 2

Applica lo stile a tutti gli elementi che corrispondono al secondo selettore se compaiono dopo gli elementi corrispondenti al primo selettore. Ad esempio, dato un frammento di codice HTML:

<p>Line one</p> 
<hr /> 
<p>Line two</p> 
<p>Line three</p> 

e una regola CSS:

hr ~ p { 
    font-weight: bold; 
} 

solo <p>Line two</p> e <p>Line three</p> apparirà in grassetto. Nel tuo esempio, penso che Visual Studio stia riscontrando un problema nell'interpretazione del modificatore :hover, poiché non è realmente un elemento. Se lo rimuovi dalla regola, potrebbe funzionare correttamente.