css - CSS中的波浪号（~）是什么意思

Question

我想知道 (~) 在 css 中是什么意思。

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

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

score 60 · Accepted Answer

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>

score 27 · Accepted Answer

如果它们出现在匹配第一个选择器的元素之后，它会将样式应用于匹配第二个选择器的所有元素。例如，给定一个 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，因为它并不是真正的元素。如果将其从规则中删除，它可能会正常工作。

2 回答 2