符号代字号（〜）在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代码段和CSS规则：

hr ~ p {
    font-weight: bold;
}

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

只有<p>Line two</p>和<p>Line three</p>会显示为粗体。在您的示例中，我认为Visual Studio在解释:hover修饰符时遇到问题，因为它实际上不是一个元素。如果从规则中删除它，它可能会正常工作。