符号代字号(〜)在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修饰符时遇到问题,因为它实际上不是一个元素.如果从规则中删除它,它可能正常工作.