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

本文翻译自：What does the “~” (tilde/squiggle/twiddle) CSS selector mean?

Searching for the ~ character isn't easy. 搜索~字符并不容易。 I was looking over some CSS and found this 我查看了一些CSS，发现了这个

.check:checked ~ .content {
}

What does it mean? 这是什么意思？

---

#1楼

参考：https://stackoom.com/question/jEu6/波浪号-波浪形-旋转-CSS选择器是什么意思

---

#2楼

General sibling combinator 通用同级组合器

The general sibling combinator selector is very similar to the adjacent sibling combinator selector. 通用的同级组合器选择器与相邻的同级组合器选择器非常相似。 The difference is that the element being selected doesn't need to immediately succeed the first element, but can appear anywhere after it. 不同之处在于，被选择的元素不需要立即在第一个元素之后，而是可以出现在其后的任何位置。

More info 更多信息

---

#3楼

The ~ selector is in fact the General sibling combinator (renamed to Subsequent-sibling combinator in selectors Level 4 ): ~选择器实际上是通用同级组合器 （在选择器级别4中重命名为后续同级组合器 ）：

The general sibling combinator is made of the "tilde" (U+007E, ~) character that separates two sequences of simple selectors. 通用同级组合器由分隔两个简单选择器序列的“波浪号”（U + 007E，〜）字符组成。 The elements represented by the two sequences share the same parent in the document tree and the element represented by the first sequence precedes (not necessarily immediately) the element represented by the second one. 这两个序列所表示的元素在文档树中共享相同的父对象，而第一个序列所表示的元素在第二个所表示的元素之前（不一定紧接）。

Consider the following example: 考虑以下示例：

 .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 matches the 4th and 5th list item because they: .a ~ .b与第4个和第5个列表项匹配，因为它们：

• Are .b elements 是.b元素
• Are siblings of .a 是.a兄弟姐妹
• Appear after .a in HTML source order. 按HTML源顺序显示在.a之后。

Likewise, .check:checked ~ .content matches all .content elements that are siblings of .check:checked and appear after it. 同样， .check:checked ~ .content与.check:checked同级项的所有.content元素匹配，并出现在其后。

---

#4楼

It is General sibling combinator and is explained in @Salaman's answer very well. 它是General sibling combinator并在@Salaman的答案中作了很好的解释。

What I did miss is Adjacent sibling combinator which is + and is closely related to ~ . 我错过的是+且与~密切相关的Adjacent sibling combinator 。

example would be 例子是

.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>

• Matches elements that are .b 匹配.b元素
• Are adjacent to .a 与.a相邻
• After .a in HTML 在HTML中的.a之后

In example above it will mark 2nd li but not 4th. 在上面的示例中，它将标记为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 JSFiddle

---

#5楼

Good to also check the other combinators in the family and to get back to what is this specific one. 还可以检查该家族中的其他组合器 ，然后回到这个特定的组合器。

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

Example checklist: 清单示例：

• ul li - Looking inside - Selects all the li elements placed (anywhere) inside the ul ; ul li - 寻找内部 -选择所有的li放置（任意位置）的内部元件ul ; Descendant selector 后代选择器
• ul > li - Looking inside - Selects only the direct li elements of ul ; ul > li 向内看 - 仅选择ul 的直接 li元素； ie it will only select direct children li of ul ; 即它将只选择ul直子li ； Child Selector or Child combinator selector 子选择器或子组合器选择器
• ul + ul - Looking outside - Selects the ul immediately following the ul ; ul + ul 向外看 -在ul立即选择ul ； It is not looking inside, but looking outside for the immediately following element; 它不是在寻找内部，而是在寻找紧随其后的元素。 Adjacent Sibling Selector 相邻兄弟选择器
• ul ~ ul - Looking outside - Selects all the ul which follows the ul doesn't matter where it is, but both ul should be having the same parent; ul ~ ul - 向外看 -选择所有ul后面的ul不要紧，它在哪里，但两者ul应具有相同父节点; General Sibling Selector 通用兄弟选择器

---

The one we are looking at here is General Sibling Selector 我们在这里看到的是通用兄弟选择器

---

#6楼

Note that in an attribute selector (eg, [attr~=value] ), the tilde 请注意，在属性选择器（例如[attr~=value] ）中，波浪号

Represents an element with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly value . 表示一个属性名称为attr的元素，其值是一个用空格分隔的单词列表，其中之一就是value 。

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