什么是符号代字号（〜）在CSS中的含义

Question

我想知道（〜）在css中是什么意思。

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

在visual studio中，当我使用此符号时，出现'意外字符序列'错误。这在CSS中的实际含义是什么。它有什么作用？

Answer 1

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

8.3.2。通用兄弟组合器

通用兄弟组合器由分隔两个简单选择器序列的“代字符”（U + 007E，〜） 字符组成。由两个序列表示的元素在 文档树中共享相同的父元素，并且由第一序列 表示的元素在第二个表示的元素之前（不一定立即）。

例如

h1 ~ pre 

匹配<pre>这里：

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

还有+选择，对相邻的兄弟组合子：与h1 + pre的<pre>标签必须是右后<h1>

Answer 2

它将样式应用于与第二个选择器匹配的所有元素（如果它们出现在匹配第一个选择器的元素之后）。例如，给定一个HTML片段：

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

和CSS规则：

hr ~ p { 
    font-weight: bold; 
} 

仅<p>Line two</p>和<p>Line three</p>会出现大胆。在你的例子中，我认为Visual Studio在解释:hover修饰符时遇到问题，因为它不是一个真正的元素。如果您从规则中删除它，它可能会正常工作。