~选择器实际上是子同胞组合子(之前被称为一般同胞组合子，直到2017年):

子同胞组合子由“波浪号”(U+007E， ~)组成。 分隔两个简单选择器序列的字符。的 类中由两个序列表示的元素共享相同的父元素 文档树和由第一个序列表示的元素 元素表示的元素的前面(不一定立即) 第二个。

考虑下面的例子:

a ~ b ~ background-color: powderblue; 的 <德> <李班=一等" b " > < / li > <李课第二= " a " > < / li > < li > 3 < / li > <李班李= >第四< / b > < li第五课= " b " > < / li > < /德>

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

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

类似地，.check:checked ~ .content匹配出现在.check:checked之后的所有.content元素。

~选择器实际上是子同胞组合子(之前被称为一般同胞组合子，直到2017年):

子同胞组合子由“波浪号”(U+007E， ~)组成。 分隔两个简单选择器序列的字符。的 类中由两个序列表示的元素共享相同的父元素 文档树和由第一个序列表示的元素 元素表示的元素的前面(不一定立即) 第二个。

考虑下面的例子:

a ~ b ~ background-color: powderblue; 的 <德> <李班=一等" b " > < / li > <李课第二= " a " > < / li > < li > 3 < / li > <李班李= >第四< / b > < li第五课= " b " > < / li > < /德>

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

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

类似地，.check:checked ~ .content匹配出现在.check:checked之后的所有.content元素。

一般兄弟组合子

一般的兄弟组合子选择器与相邻的兄弟组合子选择器非常相似。不同之处在于，被选中的元素不需要立即位于第一个元素的后面，而是可以出现在第一个元素之后的任何位置。

更多信息

很好地检查了家族中其他的组合子并得到这个特定的组合子是什么。

乌尔· 李> UL + UL UL ~ UL UL

示例清单:

ul li - Looking inside - Selects all the li elements placed (anywhere) inside the ul; Descendant combinator ul > li - Looking inside - Selects only the direct li elements of ul; i.e. it will only select direct children li of ul; Child combinator ul + ul - Looking outside - Selects the ul immediately following the ul; It is not looking inside, but looking outside for the immediately following element; Adjacent sibling combinator / Next-sibling combinator ul ~ ul - Looking outside - Selects all the following ul's, but both ul's should be having the same parent; General sibling combinator / Subsequent-sibling combinator

我们在这里看到的是一般兄弟组合子/子兄弟组合子