CSS选择中的 " ~ " 条件启动选择器 求资料

Question

偶尔看到一个语句：s1:hover ~ s2{color:red;}发现 " ~ " 可以使得选择器实现“if”的效果，就是 ~ 前边的条件满足了，就会启动后面s2的选择器。但是google半天没有找到教程资料，w3c/mdn都查了~ 实在不知道 这个知识点叫什么名字，也没法查希望大神们给点指引~__首先谢谢大家给的指点~原因找到了，不过是动态伪类+兄弟选择器,知识点都学过，可是一直没实战。昨天看一个实例的原码时突然愣住了，还以为这个~ 是个HTML5的新符号，钻死胡同半天。看来光看书、做题，不能融会贯通，脑子里没有创造力、整合力，遇到实际问题就卡住，真的崩溃。再次谢谢大家帮助

Answer 1

这个符号的意思是当前元素后面的所有同级元素
.s1:hover ~ .s2这句解释就是 s1在hover状态下，对它后面的平级的s2应用样式

<div class="container">
    <div class="s2">不受影响，虽与S1同级，但是它在S1前面</div>
    <div class="s1"></div>
    <div class="s2">受影响</div>
    <div class="s2">受影响</div>
    <div class="s2">受影响</div>
    <div class="s3">
        <div class="s2">不受影响，因为与s1不同级别</div>
    </div></div>