“~”（波浪线/波浪线/旋转）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匹配第 4 和第 5 个列表项，因为它们：

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

同样， .check:checked ~ .content匹配所有.content元素，这些元素是.check:checked的兄弟并出现在它之后。

Answer 2

还可以检查家族中的其他组合子并回到这个特定的组合子是什么。

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

示例清单：

• ul li -向内看- 选择放置在ul内（任何地方）的所有li元素； 后代组合子
• ul > li -查看内部- 仅选择ul的直接li元素； 即它只会选择ul的直接子li ； 子组合器
• ul + ul -向外看- 选择紧跟在ul之后的ul ； 它不是向内看，而是向外寻找紧随其后的元素； 相邻兄弟组合器/下一个兄弟组合器
• ul ~ ul -向外看- 选择所有以下ul ，但两个ul应该具有相同的父级； 一般兄弟组合器/ 后续兄弟组合器

---

我们在这里看到的是通用兄弟组合器/ 后续兄弟组合器

Answer 3

这篇文章被标记为过时，因为内容已过时。 它目前不接受新的交互。

一般兄弟组合子

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

更多信息

Answer 4

它是General sibling combinator ，在@Salaman 的回答中得到了很好的解释。

我错过的是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相邻
• 在 HTML 中的.a之后

在上面的例子中，它会标记 2nd li而不是 4th。

 .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

Answer 5

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

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

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Answer 6

虽然这个问题已经得到了适当的回答，但我在想知道波浪号~选择器如何在 JS 中使用时遇到了这个问题。 为其他想知道的人找到这篇 MDN 文章：

// Select all elements with a class of the white-space separated word, container
const allContainers = document.querySelectorAll("[class~='container']");
// Looks for any element like this <div class="container">
// Or like this <div class="container abc-xyz">

参考

1. MDN 属性选择器： https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors