“~”（波浪线/波浪线/旋转）CSS 选择器是什么意思？

Question

搜索

~

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

.check:checked ~ .content {
}

这是什么意思？

Answer 1

~

选择器实际上是后续兄弟组合器（之前称为通用兄弟组合器直到2017年）：

后续兄弟组合器由“波形符”组成（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

很高兴也检查一下家族中的其他组合器，并回到这个特定的组合器是什么。

• ul li

• ul > li

• ul + ul

• ul ~ ul

清单示例：

• ul li

  - 查看内部 - 选择放置在 li 内部（任意位置）的

  all

  元素； 后代组合器
ul
• - 查看内部 - 仅选择ul > li的直接

  li

  元素；即它只会选择

  ul

  的直接子代

  li

  ； 子组合器
ul
• - 向外看 - 选择紧随 ul + ul 之后的

  ul

  ；它不是向内查找，而是向外查找紧随其后的元素；

  相邻同级组合器

  / 下一个同级组合器 ul
-

• 向外看

  - 选择以下所有 ul ~ ul，但两个 ul

   应该具有相同的父级； 

  一般同级组合器

  / 后续同级组合器
我们在这里看到的是

---

通用兄弟组合器

/ 后续兄弟组合器

Answer 3

通用兄弟组合器

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

更多信息

这里有一些基于第一个答案的更详细的片段。

Answer 4

基本上

ul

都会选择

多个相邻的兄弟姐妹

同一标签内的多个兄弟组
在整个文档中多次

~

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

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

将选择

恰好一个相邻的兄弟姐妹

同一标签内的同级组
在整个文档中多次

+

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