首頁(yè) 猿問(wèn) CSS選擇中的 " ~...

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

Html5

江戶(hù)川亂折騰 2018-08-10 13:55:57

偶爾看到一個(gè)語(yǔ)句：s1:hover ~ s2{color:red;}發(fā)現(xiàn) " ~ " 可以使得選擇器實(shí)現(xiàn)“if”的效果，就是 ~ 前邊的條件滿(mǎn)足了，就會(huì)啟動(dòng)后面s2的選擇器。但是google半天沒(méi)有找到教程資料，w3c/mdn都查了~ 實(shí)在不知道這個(gè)知識(shí)點(diǎn)叫什么名字，也沒(méi)法查希望大神們給點(diǎn)指引~__首先謝謝大家給的指點(diǎn)~原因找到了，不過(guò)是動(dòng)態(tài)偽類(lèi)+兄弟選擇器,知識(shí)點(diǎn)都學(xué)過(guò)，可是一直沒(méi)實(shí)戰(zhàn)。昨天看一個(gè)實(shí)例的原碼時(shí)突然愣住了，還以為這個(gè)~ 是個(gè)HTML5的新符號(hào)，鉆死胡同半天。看來(lái)光看書(shū)、做題，不能融會(huì)貫通，腦子里沒(méi)有創(chuàng)造力、整合力，遇到實(shí)際問(wèn)題就卡住，真的崩潰。再次謝謝大家?guī)椭?

查看完整描述

2 回答

月關(guān)寶盒

TA貢獻(xiàn)1772條經(jīng)驗(yàn) 獲得超5個(gè)贊

這個(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>

反對(duì) 回復(fù) 2018-08-12