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

【问题标题】：What does the "~" (tilde/squiggle/twiddle) CSS selector mean?“~”（波浪线/波浪线/旋转）CSS 选择器是什么意思？
【发布时间】：2012-06-02 16:01:23
【问题描述】：

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

.check:checked ~ .content {
}

什么意思？

【问题讨论】：

标签： css css-selectors

【解决方案1】：

通用兄弟组合子

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

More info

【讨论】：

【解决方案2】：

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

一般的兄弟组合子由“波浪号”（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 的兄弟元素并出现在它之后。

【讨论】：

@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 style文件中看到了~的波浪符号，是什么意思？
@HerrSerker 你不正确。请查看developer.mozilla.org/en-US/docs/Web/CSS/:checked 的示例
"Next" 意味着立即尾随，这是不准确的。后续会更好。

【解决方案3】：

它是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 之后

在上面的示例中，它将标记为第 2 个 li 而不是第 4 个。

   .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

【讨论】：

【解决方案4】：

很高兴也检查一下家庭中的另一个combinators 并回到这个特定的。

ul li
ul > li
ul + ul
ul ~ ul

示例清单：

ul li - 查看内部 - 选择所有放置在ul 内（任何位置）的li 元素； 后代选择器
ul > li - 往里看 - 选择仅直接 li 的ul 元素；即它只会选择ul 的直接子代li； 子选择器或子组合器选择器
ul + ul - 向外看 - 选择紧跟在ul 之后的ul；它不是向内看，而是向外寻找紧随其后的元素； 相邻兄弟选择器
ul ~ ul - 往外看 - 选择ul 后面的所有ul 并不重要，但ul 都应该有同一个父母； 通用兄弟选择器

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

【讨论】：

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

【解决方案5】：

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

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

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

【讨论】：