文章詳情頁
前端 - 誰來解釋下這兩個 CSS selector 區別
瀏覽：225日期：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. 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)
網公網安備