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

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

.check:checked ~ .content {
}

这是什么意思？

该~选择器实际上是通用同级组合器（在选择器级别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并在其后出现的所有元素。

还可以检查该家族中的其他组合器，然后回到这个特定的组合器。

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

清单示例：

• ul li- 寻找内部 -选择所有的li元件放置（任意位置）内的ul; 后代选择器
• ul > li- 向内看 - 仅 选择的直接li元素ul；即它只会选择直接子女li的ul; 子选择器或子组合器选择器
• ul + ul- 向外看 -选择ul紧随其后的ul；它不是在寻找内部，而是在寻找紧随其后的元素。相邻兄弟选择器
• ul ~ ul- 向外看 -选择所有跟在ul后面的东西ul都没关系，但是两者ul应该具有相同的父对象；通用兄弟选择器

我们在这里看到的是通用兄弟选择器

通用同级组合器

通用的同级组合器选择器与相邻的同级组合器选择器非常相似。不同之处在于，被选择的元素不需要立即在第一个元素之后，而是可以出现在其后的任何位置。

更多信息

它是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
• 毗邻 .a
• 之后.a在HTML

在上面的示例中，它将标记为2，li而不是4。

   .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

请注意，在属性选择器（例如[attr~=value]）中，波浪号

表示一个属性名称为attr的元素，其值是一个用空格分隔的单词列表，其中之一就是value。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors