什么是“〜”（代字符/ squiggle / twiddle）CSSselect器是什么意思？
search~字符并不容易。 我正在查看一些CSS，并发现这一点
.check:checked ~ .content { }
这是什么意思？
~select器实际上是根据select器4级工作草案的通用兄弟组合器 （或兄弟姐妹组合器 ）：
一般的兄弟组合是由“代字符”（U + 007E，〜）字符组成的，它将两个简单的select符序列分开。 由两个序列表示的元素在文档树中共享相同的父亲，并且由第一序列表示的元素先于（不一定立即）在由第二个表示的元素之前。
考虑下面的例子：
.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>
一般兄弟组合
一般的兄弟组合select器与相邻的兄弟组合select器非常相似。 不同之处在于被选中的元素不需要立即接替第一个元素，而是可以在其之后的任何地方出现。
更多信息
很好也检查在家庭其他combinators并回到这是什么具体的。
-
ul li -
ul > li -
ul + ul -
ul ~ ul
示例清单：
-
ul li– 向内看 – select在li放置（任何地方）的所有li元素; 后代select器 -
ul > li– 向内看 – 只selectul的直接li元素; 即只select直接的儿童li; 子select器或子组合select器 -
ul + ul– 向外看 – 在ul立即selectul; 它不在里面寻找，而是在外面寻找紧接着的元素; 邻居兄弟select器 -
ul ~ ul– 在外面寻找 – selectul后面的所有ul并不重要，但是两个ul应该有相同的父亲; 一般兄弟姐妹select
我们在这里看到的是一般兄弟select器
这是General sibling combinator并在@萨拉曼的回答很好地解释。
我没有想到的是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相邻 - 在
.a之后
在上面的例子中，它将标记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>
