前端 - 誰來解釋下這兩個 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. dockerfile - [docker build image失敗- npm install]2. golang - 用IDE看docker源碼時的小問題3. docker-compose中volumes的問題4. 在windows下安裝docker Toolbox 啟動Docker Quickstart Terminal 失敗!5. docker安裝后出現Cannot connect to the Docker daemon.6. 我在centos容器里安裝docker,也就是在容器里安裝容器,報錯了?7. mac里的docker如何命令行開啟呢?8. javascript - 最近用echarts做統計圖時遇到兩個問題!!9. docker內創建jenkins訪問另一個容器下的服務器問題10. docker不顯示端口映射呢?
![dockerfile - [docker build image失敗- npm install]](http://www.b3g6.com/attached/image/news/202311/1028105a80.png)
網公網安備