前端 - 誰來解釋下這兩個 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. docker-compose中volumes的問題2. boot2docker無法啟動3. 關docker hub上有些鏡像的tag被標記““This image has vulnerabilities””4. docker安裝后出現Cannot connect to the Docker daemon.5. nignx - docker內nginx 80端口被占用6. java - SSH框架中寫分頁時service層中不能注入分頁類7. docker容器呢SSH為什么連不通呢?8. 關于docker下的nginx壓力測試9. java - Spring事務回滾問題10. dockerfile - 為什么docker容器啟動不了?

網公網安備