前端 - 谁来解释下这两个 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

问题解答

貌似是浏览器bug