“〜”（波浪号/波浪形/旋转）CSS选择器是什么意思？

Question

搜索~角色并不容易。我查看了一些CSS，发现了这个

.check:checked ~ .content {
}

这是什么意思？

Answer 1

该~选择器实际上是[通用同级组合器（在选择器级别4中重命名为后续同级组合[器）：

通用同级组合器由分隔两个简单选择器序列的“波浪号”（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 与第4个和第5个列表项匹配，因为它们：

• 是.b元素
• 是的兄弟姐妹 .a
• 之后出现.a在HTML源顺序。

同样，.check:checked ~ .content匹配.content作为其兄弟姐妹.check:checked并在其后出现的所有元素。