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

What does the "~" (tilde/squiggle/twiddle) CSS selector mean?

提问by Akshat

Searching for the ~character isn't easy. I was looking over some CSS and found this

寻找~角色并不容易。我正在查看一些 CSS 并发现了这个

.check:checked ~ .content {
}

What does it mean?

这是什么意思？

回答by Salman A

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

一般的同级组合器由分隔两个简单选择器序列的“波浪号”(U+007E, ~) 字符组成。由两个序列表示的元素在文档树中共享相同的父元素，并且由第一个序列表示的元素位于（不一定紧随其后）由第二个序列表示的元素之前。

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 ~ .bmatches the 4th and 5th list item because they:

.a ~ .b匹配第 4 个和第 5 个列表项，因为它们：

• Are .belements
• Are siblings of .a
• Appear after .ain HTML source order.

• 是.b元素
• 是兄弟姐妹吗 .a
• 出现.a在 HTML 源代码顺序之后。

Likewise, .check:checked ~ .contentmatches all .contentelements that are siblings of .check:checkedand appear after it.

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

回答by Lijo Joseph

Good to also check the other combinatorsin the family and to get back to what is this specific one.

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

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

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

Example checklist:

示例清单：

• ul li- Looking inside- Selects allthe lielements placed (anywhere) inside the ul; Descendant selector
• ul > li- Looking inside- Selects only the directlielements of ul; i.e. it will only select direct children liof ul; Child Selectoror Child combinator selector
• ul + ul- Looking outside- Selects the ulimmediately following the ul; It is not looking inside, but looking outside for the immediately following element; Adjacent Sibling Selector
• ul ~ ul- Looking outside- Selects all the ulwhich follows the uldoesn't matter where it is, but both ulshould be having the same parent; General Sibling Selector

• ul li-寻找内部-选择所有的li元件放置（任意位置）内的ul; 后代选择器
• ul > li-向内看-只选择的直接li元素ul；即它只会选择直接子女li的ul; 子选择器或子组合器选择器
• ul + ul-向外看- 选择ul紧随其后的ul; 它不是向内寻找，而是向外寻找紧随其后的元素；相邻同胞选择器
• ul ~ ul-向外看- 选择ul后面的所有内容，ul无论它在哪里，但两者都ul应该具有相同的父级；一般同胞选择器

---

---

The one we are looking at here is General Sibling Selector

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

回答by Rohit Azad

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

更多信息

回答by Matas Vaitkevicius

It is General sibling combinatorand is explained in @Salaman's answer very well.

General sibling combinator在@Salaman 的回答中已经很好地解释了这一点。

What I did miss is Adjacent sibling combinatorwhich 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
• Are adjacent to .a
• After .ain HTML

• 匹配元素是 .b
• 毗邻 .a
• 之后.a在HTML

In example above it will mark 2nd libut not 4th.

在上面的示例中，它将标记为 2ndli但不是 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

回答by Ian Hunter

Note that in an attribute selector (e.g., [attr~=value]), the tilde

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

Represents an element with an attribute name of attrwhose 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/en-US/docs/Web/CSS/Attribute_selectors