\"~\"（波浪线/波浪线/旋转线）CSS 选择器是什么意思？答案

【问题标题】：What does the "~" (tilde/squiggle/twiddle) CSS selector mean?\"~\"（波浪线/波浪线/旋转线）CSS 选择器是什么意思？
【发布时间】：2022-12-18 02:14:53
【问题描述】：

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

.check:checked ~ .content {
}

这是什么意思？

【问题讨论】：

标签： css css-selectors

【解决方案1】：

~ 选择器实际上是 subsequent-sibling combinator（以前称为通用兄弟组合器 until 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 匹配所有 .check:checked 的兄弟元素并出现在它之后的 .content 元素。

【讨论】：

@SalmanA，肯定有一种方法可以选择之前的所有内容而不是之后的所有内容吗？ ¶ stackoverflow.com/q/28007288/632951
@Pacerier 没有。请参阅stackoverflow.com/q/1014861/87015，原因也适用于您的问题。 TL;DR CSS 的设计使得浏览器不必返回（或向上）并在当前元素匹配规则时重新设置某些元素的样式。想象一下，在呈现后更改整个 <body> 的字体大小，只是因为最后一个是 <div class=reset-font>。 @HerrSerker 是正确的，但（IMO）句子措辞不正确。
@card-prefix-cls: ~"@{css-prefix}card";，我在less样式文件中看到~的波浪符号，是什么意思？
@HerrSerker 你不对。请在developer.mozilla.org/en-US/docs/Web/CSS/:checked查看示例

【解决方案2】：

也很高兴检查家庭中的另一个combinators，然后回到这个具体的是什么。

ul li
ul > li
ul + ul
ul ~ ul

清单示例：

ul li-向内看- 选择全部li元素放置在ul内（任何地方）； Descendant combinator
ul > li-向内看- 选择只有直接的liul的元素；即它只会选择ul的直接孩子li； Child combinator
ul + ul-向外看- 选择ul紧随其后ul；它不是向内看，而是向外看紧随其后的元素； Adjacent sibling combinator / Next-sibling combinator
ul ~ ul-向外看- 选择以下所有ul's，但ul's 应该有相同的父母； General sibling combinator / Subsequent-sibling combinator

我们在这里看到的是General sibling combinator / Subsequent-sibling combinator

【讨论】：

向外看可能会产生误导。 ...并排看可能更好。

【解决方案3】：

通用兄弟组合器

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

More info

【讨论】：