: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>