取決於輸入複選框狀態的CSS3樣式元素

在此示例中，'〜'的含義是什麼？我從本教程中看到了這個例子。 http://css-tricks.com/the-checkbox-hack/取決於輸入複選框狀態的CSS3樣式元素

我知道可以根據複選框的狀態完全不同地使用元素的樣式。但是，我找不到任何解釋'〜'的CSS文檔？

input[type=checkbox] { 
    position: absolute; 
    top: -9999px; 
    left: -9999px; 
    /* For mobile, it's typically better to position checkbox on top of clickable 
     area and turn opacity to 0 instead. */ 
} 

/* Default State */ 
div { 
    background: green; 
    width: 400px; 
    height: 100px; 
    line-height: 100px; 
    color: white; 
    text-align: center; 
} 

/* Toggled State */ 
input[type=checkbox]:checked ~ div { 
    background: red; 
}

來源

2013-01-17 angelokh

這是一個兄弟元素的選擇器。你在那裏的那個人會在同一個家長中找到一個複選框的所有'div'兄弟姐妹，但只有在dom複選框後面的那個'div'兄弟姐妹。複選框前的'Div'兄弟姐妹將不會被包括在內。

真棒選擇器引用，包括波浪： http://learn.shayhowe.com/advanced-html-css/complex-selectors

來源

2013-01-17 21:13:02 RhinoWalrus

http://www.w3.org/TR/selectors/#general-sibling-combinators

8.3.2。通用兄弟組合器

通用兄弟組合器由分隔兩個簡單選擇器序列的「代字符」（U + 007E，〜）字符組成。由這兩個序列表示的元素在文檔樹中共享同一父元素，並且由第一個序列表示的元素先於（不一定立即）在第二個元素表示的元素之前。

實施例：

H1〜預先
表示以下內容的H1預先元件。這是一個正確的和有效的，但局部的，描述：

<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>

來源

2013-01-17 21:34:16 Musa

它是一個一般兄弟組合子和類似相鄰的兄弟組合子（+）。區別在於第二個選擇器不必緊跟第一個選擇器。它將選擇前一個選擇器之前的所有元素。

來源

2013-01-17 23:09:28

取決於輸入複選框狀態的CSS3樣式元素

回答

8.3.2。通用兄弟組合器

相關問題