Css选择器未知符号

Question

我在CSS选择器中遇到问题。~标志对我来说是未知的，我不明白这是怎么回事！看看这个：

nav[role="custom-dropdown"] input[type=checkbox]:checked ~ label:after {

这个样本中的~符号是什么？？？

Answer 1

它的通用兄弟组合子

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

<ul>
    <li class="type1"></li>
    <li></li>
    <li class="type2"></li>
    <li class="type2"></li>
</ul>
.type1 ~ .type2
{
}

上述选择器将返回具有.type2的两个li，尽管它们不直接与.type1 相邻