前端 - 誰來解釋下這兩個 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. macos - 如何徹底刪除mac自帶的apache和php2. javascript - sublime快鍵鍵問題3. docker 17.03 怎么配置 registry mirror ?4. DADB.class.php文件的代碼怎么寫5. javascript - immutable配合react提升性能?6. css - 寫頁面遇到個布局問題,求大佬們幫解答,在線等,急!~7. mysql事務回滾定位8. javascript - html5多個label中其中一個觸發change,如何判斷是哪一個出發了change9. 實現bing搜索工具urlAPI提交10. css - 移動端字體設置問題

網公網安備