css - "~"(波浪线/波浪线/旋转)CSS 选择器是什么意思？

Question

搜索 ~ 字符并不容易。我正在查看一些 CSS 并发现了这个

.check:checked ~ .content {
}

这是什么意思？

Answer 1

~ 选择器实际上是 subsequent-sibling combinator (以前称为通用兄弟组合器 until 2017 ):

The subsequent-sibling combinator is made of the "tilde" (U+007E, ~)character that separates two sequences of simple selectors. Theelements represented by the two sequences share the same parent in thedocument tree and the element represented by the first sequenceprecedes (not necessarily immediately) the element represented by thesecond one.

考虑以下示例:

.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 匹配第 4 和第 5 个列表项，因为它们:

• 是.b元素
• 是.a的 sibling
• 在 HTML 源代码顺序中出现在 .a 之后。

同样，.check:checked ~ .content 匹配作为 .check:checked sibling 的所有 .content 元素并出现在它之后.