input:not(:placeholder-shown) 是唯一可靠判断“已输入”的css条件，因其直接响应 value 非空状态，不依赖焦点或校验；需确保有 placeholder 属性，且注意浏览器兼容性与dom结构限制。
:placeholder-shown 本身不“隐藏提示”，它只是个状态信号：当输入框显示 placeholder 文本时才匹配。你要的“有内容时隐藏提示”，真正该用的是它的反向选择器 input:not(:placeholder-shown) —— 这才是判断“已输入”的唯一可靠 CSS 条件。
为什么 input:not(:placeholder-shown) 是唯一可靠条件
它直接响应 value 的空值状态，不依赖焦点、校验或用户交互：
-
:placeholder-shown只在三个条件同时满足时触发：元素有placeholder属性、input.value === ""（严格空字符串）、浏览器支持该伪类 - 只要
value.trim()不为空（哪怕只有一个空格），:placeholder-shown就失效，:not(:placeholder-shown)立刻生效 -
:valid依赖required或正则校验，输错邮箱也会触发，不符合“只看有没有输”的需求 -
:focus会误判：用户刚点进去但还没打字，此时 placeholder 仍显示，:focus成立但你不该隐藏提示
必须带 placeholder 属性，哪怕只是空格
没这个属性，:placeholder-shown 永远不会匹配，整个逻辑失效：
- 写
placeholder=""或placeholder=" "都行，但不能省略 -
type="number"或type="date"清空后常不渲染 placeholder，导致伪类不触发 → 此时需 JS 回退（如监听input事件手动加has-content类） - Safari ≤15.3、IE 完全不支持；Edge 12–18 有闪烁；生产环境建议用
div:has(input:placeholder-shown)（Chrome 105+/Safari 15.4+）配合 JS fallback
常见错误：伪类顺序与 DOM 结构陷阱
伪类写错顺序或 HTML 结构不对，会导致样式完全不生效：
-
input:focus:placeholder-shown在部分浏览器不识别；应写成input:placeholder-shown:focus（先状态后交互） - 想控制
label，必须是input的**下一个兄弟元素**：input + label才有效；中间插图标或错误提示就断链 -
input:placeholder-shown::after永远无效 ——<input>是替换元素，不支持伪元素 - 清除按钮点击后设
input.value = ''，但:placeholder-shown不恢复？必须手动触发：input.dispatchEvent(new Event('input', { bubbles: true }))
最易被忽略的一点：移动端清除按钮点击后，若不立刻 input.focus()，软键盘会收起，用户无法继续输入。这个细节纯 CSS 无法覆盖，必须 JS 补齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
