CSS 中的波浪号 (~) 是什么意思
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15471382/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What does symbol tilde (~) mean in CSS
提问by Monie corleone
I want to know what does (~) mean in css.
我想知道 (~) 在 css 中是什么意思。
#img1:hover ~ #img2 {
opacity: 0;
}
In visual studio, i get 'unexpected character sequence' error when i use this symbol. what is the actual meaning of this in CSS. what does it do?
在 Visual Studio 中，使用此符号时出现“意外字符序列”错误。CSS 中 this 的实际含义是什么。它有什么作用？
回答by MarcinJuraszek
http://www.w3.org/TR/selectors/
http://www.w3.org/TR/selectors/
8.3.2. General sibling combinator
The general sibling combinator is made of the "tilde" (U+007E, ~) character that separates two sequences of simple selectors. The elements represented by the two sequences share the same parent in the document tree and the element represented by the first sequence precedes (not necessarily immediately) the element represented by the second one.
8.3.2. 一般兄弟组合子
一般的同级组合器由分隔两个简单选择器序列的“波浪号”(U+007E, ~) 字符组成。由两个序列表示的元素在文档树中共享相同的父元素，并且由第一个序列表示的元素位于（不一定紧随其后）由第二个序列表示的元素之前。
example
例子
h1 ~ pre
matches that <pre>here:
匹配<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>
There is also +selector, for adjacent sibling combinator: with h1 + prethe <pre>tag would have to be right after <h1>
还有一个+选择，对相邻的兄弟组合子：与h1 + pre该<pre>标签必须是右后<h1>
回答by Neil T.
It applies the style to all elements matching the second selector if they appear after the elements matching the first selector. For example, given an HTML snippet and CSS rule:
如果它们出现在与第一个选择器匹配的元素之后，它将样式应用于与第二个选择器匹配的所有元素。例如，给定一个 HTML 片段和 CSS 规则：
hr ~ p {
font-weight: bold;
}<p>Line one</p>
<hr />
<p>Line two</p>
<p>Line three</p>only <p>Line two</p>and <p>Line three</p>will appear bold. In your example, I think Visual Studio is having a problem interpreting the :hovermodifier, since it isn't really an element. If you remove it from the rule, it may work correctly.
只<p>Line two</p>和<p>Line three</p>会以粗体显示。在您的示例中，我认为 Visual Studio 在解释:hover修饰符时遇到问题，因为它实际上并不是一个元素。如果从规则中删除它，它可能会正常工作。
