:not(:placeholder-shown) 不能与相邻兄弟组合器一起使用

Question

嗨：）我正在尝试运行最简单的示例：not（：placeholder-shown）并且它不起作用。这是我的codepen的链接。https://codepen.io/yael-screenovate/pen/eYJEqRB?editors=1100我做错了什么？ 提前谢谢。 继承人的代码：

 button { display: none; } input:not(:placeholder-shown)+button { display: block; }

 <div> <input/> <button>hi there</button> </div>

Answer 1

这是因为您没有设置任何placeholder属性。

 button { display: none; } input:not(:placeholder-shown)+button { display: block; }

 <input placeholder="placeholder"/> <button>hi there</button>

不使用:not更有意义，但整个逻辑相反：

 button { display: block; } input:placeholder-shown+button { display: none; }

 <input placeholder="placeholder" /> <button>hi there</button>