“~”（波浪号/squiggle/twiddle）CSS选择器是什么意思？

一般同胞组合子

一般的同级组合器选择器与相邻的同级组合器选择器非常相似。不同之处在于被选择的元素不需要立即继承第一个元素，而是可以出现在它之后的任何地方。

更多信息

~选择器实际上是后继同胞组合子（以前称为通用兄弟组合器直到2017）：

后续兄弟组合子由“波浪号”（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的兄弟姐妹
• 以超文本标记语言源代码顺序出现在.a之后。

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

也很高兴检查家庭中的其他组合子，并回到这个特定的是什么。

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

清单示例：

• ul li-向内看-选择所有li元素放置（任何地方）在ul；子代组合器
• ul > li-向内看-选择ul的只有直接li元素；即它只会选择ul的直接子元素li；子组合子
• ul + ul-向外看-选择ul紧随其后ul；不是向内看，而是向外看紧随其后的元素；相邻兄弟组合器/下一个同级组合器
• ul ~ ul-向外看-选择以下所有ul，但两个ul应该有相同的父节点；通用同胞组合子/后续同级组合子

我们在这里看到的是通用同胞组合子/后续同级组合子