css - “?”（波浪号/波浪形/旋转）CSS选择器是什么意思？(What does the “~” (tilde/squiggle/twiddle) CSS selector mean?)

Question

Searching for the ~ character isn't easy.

(搜索~字符并不容易。)

I was looking over some CSS and found this

(我查看了一些CSS，发现了这个)

.check:checked ~ .content {
}

What does it mean?

(这是什么意思？)

  ask by Akshat translate from so

Answer 1

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元素匹配，并出现在其后。)