Co oznacza symbol tylda (~) w CSS

Question

Chcę wiedzieć, co znaczy (~) w css.

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

W studio graficznym pojawia się błąd "nieoczekiwanej sekwencji znaków", gdy używam tego symbolu. jakie jest rzeczywiste znaczenie tego w CSS. co to robi?

Answer 1

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

8.3.2. Ogólny kombinator siostrzany

Główny kombinator rodzeństwa składa się z znaku "tylda" (U + 007E, ~) , który oddziela dwie sekwencje prostych selektorów. Elementy reprezentowane przez dwie sekwencje mają takie same elementy nadrzędne w drzewie dokumentu , a element reprezentowany przez pierwszą sekwencję poprzedza (niekoniecznie bezpośrednio) element reprezentowany przez drugi element.

przykład

h1 ~ pre 

dorównuje <pre> tutaj:

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

Istnieje również + wybierak, na sąsiednim rodzeństwem Combinator: z h1 + pre tag <pre> musiałby być zaraz po <h1>

Answer 2

Stosuje styl do wszystkich elementów pasujących do drugiego selektora, jeśli pojawiają się one po elementach pasujących do pierwszego selektora. Na przykład, biorąc pod uwagę to fragment kodu HTML:

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

a reguła CSS:

hr ~ p { 
    font-weight: bold; 
} 

tylko <p>Line two</p> i <p>Line three</p> pojawi się pogrubiony. W twoim przykładzie, myślę, że Visual Studio ma problem z interpretacją modyfikatora :hover, ponieważ nie jest tak naprawdę elementem. Jeśli usuniesz go z reguły, może on działać poprawnie.