鍍金池/ 問(wèn)答/HTML5  HTML/ CSS選擇中的 " ~ " 條件啟動(dòng)選擇器 求資料

CSS選擇中的 " ~ " 條件啟動(dòng)選擇器 求資料

偶爾看到一個(gè)語(yǔ)句：

s1:hover ~ s2{color:red;}

發(fā)現(xiàn) " ~ " 可以使得選擇器實(shí)現(xiàn)“if”的效果，就是 ~ 前邊的條件滿足了，就會(huì)啟動(dòng)后面s2的選擇器。
但是google半天沒有找到教程資料，w3c/mdn都查了~ 實(shí)在不知道 這個(gè)知識(shí)點(diǎn)叫什么名字，也沒法查
希望大神們給點(diǎn)指引~

__

首先謝謝大家給的指點(diǎn)~
原因找到了，不過(guò)是動(dòng)態(tài)偽類+兄弟選擇器,知識(shí)點(diǎn)都學(xué)過(guò)，可是一直沒實(shí)戰(zhàn)。昨天看一個(gè)實(shí)例的原碼時(shí)突然愣住了，還以為這個(gè)~ 是個(gè)HTML5的新符號(hào)，鉆死胡同半天。

看來(lái)光看書、做題，不能融會(huì)貫通，腦子里沒有創(chuàng)造力、整合力，遇到實(shí)際問(wèn)題就卡住，真的崩潰。

再次謝謝大家?guī)椭?/p>

回答
編輯回答
雅痞

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

2017年5月25日 02:36
編輯回答
單眼皮

你說(shuō)的倒也沒錯(cuò)……肯定是前面都滿足了才會(huì)啟動(dòng)后面的，不過(guò) google 半天沒查到資料可見你 google 水平比較差。

  1. 搜索 css selector ~
  2. 抵達(dá) MDN CSS selectors
  3. 頁(yè)面內(nèi)搜索 ~
  4. 找到內(nèi)容
2017年3月13日 10:45
編輯回答
使勁操

我覺的你是不是把這個(gè)“～”想的太高端了，如果你把:hover想成一個(gè)元素，是不是就可以理解了。

2017年3月11日 01:37
編輯回答
抱緊我

這個(gè)符號(hào)的意思是當(dāng)前元素后面的所有同級(jí)元素
.s1:hover ~ .s2這句解釋就是 s1在hover狀態(tài)下，對(duì)它后面的平級(jí)的s2應(yīng)用樣式

<div class="container">
    <div class="s2">不受影響，雖與S1同級(jí)，但是它在S1前面</div>
    <div class="s1"></div>
    <div class="s2">受影響</div>
    <div class="s2">受影響</div>
    <div class="s2">受影響</div>
    <div class="s3">
        <div class="s2">不受影響，因?yàn)榕cs1不同級(jí)別</div>
    </div>
</div>
2017年4月2日 20:29