偶爾看到一個語句：s1:hover ~ s2{color:red;}發現 " ~ " 可以使得選擇器實現“if”的效果，就是 ~ 前邊的條件滿足了，就會啟動后面s2的選擇器。但是google半天沒有找到教程資料，w3c/mdn都查了~ 實在不知道 這個知識點叫什么名字，也沒法查希望大神們給點指引~__首先謝謝大家給的指點~原因找到了，不過是動態偽類+兄弟選擇器,知識點都學過，可是一直沒實戰。昨天看一個實例的原碼時突然愣住了，還以為這個~ 是個HTML5的新符號，鉆死胡同半天。看來光看書、做題，不能融會貫通，腦子里沒有創造力、整合力，遇到實際問題就卡住，真的崩潰。再次謝謝大家幫助
2 回答
月關寶盒
TA貢獻1772條經驗 獲得超5個贊
這個符號的意思是當前元素后面的所有同級元素.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>
- 2 回答
- 0 關注
- 783 瀏覽
添加回答
舉報
0/150
提交
取消