什麼是符號代字號（〜）在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片段：

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

和CSS規則：

hr ~ p { 
    font-weight: bold; 
} 

僅<p>Line two</p>和<p>Line three</p>會出現大膽。在你的例子中，我認爲Visual Studio在解釋:hover修飾符時遇到問題，因爲它不是一個真正的元素。如果您從規則中刪除它，它可能會正常工作。