CSS中波浪符号（~）代表什么意思？

Question

我想知道CSS中(~)的意思是什么。

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

在 Visual Studio 中，我使用此符号时出现“意外的字符序列”错误。在 CSS 中它的实际含义是什么？它有什么作用？

- Monie corleone

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> 标签后面。

- MarcinJuraszek

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修饰符，因为它并不是一个元素。如果您从规则中删除它，可能会正常工作。

- Neil T.

---

你有没有注意到在各种浏览器中使用 ~ 时出现了任何问题？最新的 Chrome 对我来说似乎忽略了它。 - Nathan

我建立了一个非常简单的 [index.html]，只包含上面的示例。它正确地显示出来，所以我打开了关于页面以获取版本号并向您报告。我使用的是Chrome 70，但导航到该页面会启动更新过程。当它完成后，我重新启动并再次尝试。因此，我可以说它在Chrome 70和71中运行正常。您可能需要确保没有任何东西覆盖您的样式。 - Neil T.