「〜」（代字符/ squiggle/twiddle）CSS選擇器是什麼意思？

Question

尋找~字符並不容易。我正在看一些CSS，發現這個

.check:checked ~ .content { 
} 

這是什麼意思？

Answer 1

的~選擇實際上是在General sibling combinator（或繼同胞組合子根據selectors Level 4 working draft）：

一般兄弟組合子是由所述 「波浪線」（U + 007E，〜） 分隔兩個簡單選擇器序列的字符。由兩個序列表示的元素在 文檔樹中共享相同的父元素，並且由第一序列 表示的元素在第二個表示的元素之前（不一定立即）。

請看下面的例子：

.a ~ .b { 
 
    background-color: powderblue; 
 
}

<ul> 
 
    <li class="b">1st</li> 
 
    <li class="a">2nd</li> 
 
    <li>3rd</li> 
 
    <li class="b">4th</li> 
 
    <li class="b">5th</li> 
 
</ul>

.a ~ .b第四和第五列表項相匹配，因爲它們：

• 是.b元素
• 是兄弟姐妹.a
• 在HTML源代碼中出現在.a之後。

同樣，.check:checked ~ .content匹配所有.content元素是.check:checked兄弟姐妹和之後出現。

Answer 2

一般兄弟組合子

一般兄弟組合子選擇器是非常相似的相鄰的兄弟組合子選擇器。區別在於被選中的元素不需要立即接替第一個元素，而是可以出現在其後的任何位置。

More info

Answer 3

這是General sibling combinator，並在@薩拉曼的回答很好地解釋。

我沒有錯過的是Adjacent sibling combinator這就是+並且與~密切相關。

例子是

.a + .b { 
    background-color: #ff0000; 
} 

<ul> 
    <li class="a">1st</li> 
    <li class="b">2nd</li> 
    <li>3rd</li> 
    <li class="b">4th</li> 
    <li class="a">5th</li> 
</ul> 

• 匹配元素是.b
• 在HTML相鄰.a
• .a後

在上面的例子它將標誌着第二li但不是第四。

.a + .b { 
 
    background-color: #ff0000; 
 
    }

<ul> 
 
    <li class="a">1st</li> 
 
    <li class="b">2nd</li> 
 
    <li>3rd</li> 
 
    <li class="b">4th</li> 
 
    <li class="a">5th</li> 
 
</ul>

JSFiddle

Answer 4

好還要檢查在家庭中的其他combinators，並要回這是什麼特定的一個。

• ul li
• ul > li
• ul + ul
• ul ~ ul

例清單：

• ul li - Looking inside - 選擇全部li元素置於ul之內（任意位置）; 後代選擇
• ul > li - 尋找內部 - 選擇僅ul直接li元件;即它只會選擇ul的直接子女li; 子選擇或兒童組合子選擇
• ul + ul - 向外看 - 選擇ul立即ul以下;它不在裏面尋找，而是在外面尋找緊接着的元素; 相鄰兄弟選擇
• ul ~ ul - 向外看 - 選擇所有後面的ul不要緊，它在哪裏，但兩者ul應具有相同父節點的ul; 一般兄弟選擇

---

我們正在尋找在這裏的一個是一般兄弟選擇

Answer 5

注意，在屬性選擇器（例如，[data-components~=wheels]），波浪

表示具有屬性名稱attr的元素，其值是以空格分隔的單詞列表，其中一個單詞完全是值。

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors