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

Question

偶尔看到一个语句：

s1:hover ~ s2{color:red;}

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

__

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

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

再次谢谢大家帮助

Answer 1

你说的倒也没错……肯定是前面都满足了才会启动后面的，不过 google 半天没查到资料可见你 google 水平比较差。

1. 搜索 css selector ~
2. 抵达 MDN CSS selectors
3. 页面内搜索 ~
4. 找到内容

Answer 2

https://developer.mozilla.org...

Answer 3

我觉的你是不是把这个“～”想的太高端了，如果你把:hover想成一个元素，是不是就可以理解了。

Answer 4

这个符号的意思是当前元素后面的所有同级元素
.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>