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

Question

偶尔看到一个语句：

s1:hover ~ s2{color:red;}

发现 " ~ " 可以使得选择器实现“if”的效果，就是 ~ 前边的条件满足了，就会启动后面s2的选择器。
但是google半天没有找到教程资料，w3c/mdn都查了~ 实在不知道 这个知识点叫什么名字，也没法查
希望大神们给点指引~

__

首先谢谢大家给的指点~
原因找到了，不过是动态伪类+兄弟选择器,知识点都学过，可是一直没实战。昨天看一个实例的原码时突然愣住了，还以为这个~ 是个HTML5的新符号，钻死胡同半天。

看来光看书、做题，不能融会贯通，脑子里没有创造力、整合力，遇到实际问题就卡住，真的崩溃。

再次谢谢大家帮助

Answer 1

这个符号的意思是当前元素后面的所有同级元素.s1:hover ~ .s2这句解释就是 s1在hover状态下，对它后面的平级的s2应用样式<div&nbsp;class="container"> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="s2">不受影响，虽与S1同级，但是它在S1前面</div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="s1"></div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="s2">受影响</div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="s2">受影响</div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="s2">受影响</div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="s3"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="s2">不受影响，因为与s1不同级别</div> &nbsp;&nbsp;&nbsp;&nbsp;</div></div>