文章詳情頁
前端 - 誰來解釋下這兩個 CSS selector 區別
瀏覽：229日期：2023-06-30 14:46:36
問題描述
錯誤代碼：
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
標簽：
CSS
相關文章：
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 - 移動端字體設置問題
排行榜
網公網安備