前端 - 誰來解釋下這兩個 CSS selector 區別
問題描述
錯誤代碼:
input { padding: 4px 0; // https://css-tricks.com/almanac/selectors/p/placeholder-shown/ &:focus:not(:placeholder-shown) + .input__clear, &.input--filled:focus + .input__clear { opacity: 1; }}
正確代碼:
input { padding: 4px 0; // https://css-tricks.com/almanac/selectors/p/placeholder-shown/ &:focus:not(:placeholder-shown) + .input__clear { opacity: 1; } /* !!! 不能和上面的合并成一行,會導致下面的選擇器無法匹配 */ &.input--filled:focus + .input__clear { opacity: 1; }}
demo 見https://jsfiddle.net/mLz7rajf/3/https://jsfiddle.net/mLz7rajf/5/正確情況應該是在不支持:placeholder-shown的瀏覽器(比如Firefox, 或者將placeholder-shown,隨便改成一個無法識別的偽類),輸入內容后顯示 Clear
問題解答
回答1:貌似是瀏覽器bug
相關文章:
1. python - scrapy url去重2. MySQL主鍵沖突時的更新操作和替換操作在功能上有什么差別(如圖)3. node.js - 微信小程序websocket連接問題4. python執行cmd命令,怎么讓他執行類似Ctrl+C效果將其結束命令?5. 實現bing搜索工具urlAPI提交6. Python中使用超長的List導致內存占用過大7. python - Django有哪些成功項目?8. ios - 類似微博首頁,一張圖的時候是如何確定圖大小的?9. 數據庫 - Mysql的存儲過程真的是個坑!求助下面的存儲過程哪里錯啦,實在是找不到哪里的問題了。10. 鏈接圖片時,鏈接不成功
