~"（波浪/波浪/扭动）CSS选择器是什么意思？

Question

搜索~字符并不容易。我在看CSS的时候发现了这个

.check:checked ~ .content {
}

这是什么意思？

Answer 1

一般兄弟组合器

一般的兄弟组合器选择器与相邻的兄弟组合器选择器非常相似。不同的是，被选择的元素不需要立即继承第一个元素，而是可以出现在它之后的任何地方。

更多信息

Answer 2

很好，也检查家庭中的其他组合器，并回到这个特定的组合器是什么。

ul li
• ul

清单示例：

• ul li-查看内部-选择放置在ul内（任何位置）的所有li元素；后代选择器
• ul

我们在这里看到的是通用同级选择器

Answer 3

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

一般同级组合符由“tilde”（u007e，~）字符组成，用于分隔两个简单选择器序列。两个序列表示的元素在文档树中共享同一父元素，第一个序列表示的元素在第二个序列表示的元素之前（不一定立即）。

考虑下面的例子：

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