“~”（波浪线/波浪线/旋转）CSS 选择器是啥意思？
Posted
技术标签:
【中文标题】“~”（波浪线/波浪线/旋转）CSS 选择器是啥意思？【英文标题】：What does the "~" (tilde/squiggle/twiddle) CSS selector mean?“~”（波浪线/波浪线/旋转）CSS 选择器是什么意思？ 【发布时间】：2012-06-02 16:01:23 【问题描述】：搜索~ 字符并不容易。我正在查看一些 CSS 并找到了这个
.check:checked ~ .content
什么意思？
【问题讨论】：
【参考方案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，肯定有一种方法可以选择之前的所有内容而不是之后的所有内容吗？ ¶***.com/q/28007288/632951 @Pacerier 没有。请参阅***.com/q/1014861/87015，原因也适用于您的问题。 TL;DR CSS 旨在让浏览器在当前元素匹配规则时不必返回（或向上）并重新设置某些元素的样式。想象一下，在渲染整个<body> 后更改其字体大小，只是因为最后一个是<div class=reset-font>。 @HerrSerker 是正确的，但（IMO）该句子的措辞不正确。
@card-prefix-cls: ~"@css-prefixcard";，我在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
【讨论】：
以上是关于“~”（波浪线/波浪线/旋转）CSS 选择器是啥意思？的主要内容，如果未能解决你的问题，请参考以下文章
波浪线（波浪线）（即“~”运算符在 Python 中的作用是啥？ [复制]