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

搜索~字符并不容易。我正在查看一些 CSS 并找到了这个

.check:checked ~ .content {
}

这是什么意思？

css css3 css-selectors

~选择器实际上是General sibling 组合子（在选择器级别 4 中重命名为 Subsequent-sibling combinator）：

通用兄弟组合器由 “波浪号”（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 个列表项，因为它们：

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

一般兄弟组合

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

很高兴也检查家庭中的其他组合器，并回到这个具体的组合。

示例清单：

ul li - 寻找内部 - 选择所有的li放置（任意位置）的内部元件ul ; 后代选择器
ul > li - 查看内部 - 仅选择ul 的直接 li元素; 也就是说，它只会选择直接子li的ul ; 子选择器或子组合选择器
ul + ul - 向外看 - 在ul立即选择ul ; 它不是向内看，而是在外面寻找紧随其后的元素; 相邻的兄弟选择器
ul ~ ul - 在外面看 - 选择ul后面的所有ul并不重要，但两个ul应该是同一个父项; 一般兄弟选择器

我们在这里看到的是General Sibling Selector

协慌网