:placeholder-shown 是唯一靠谱的纯 CSS 空状态检测方式，因 :empty 对 input 无效，CSS 无法监听 value 变化，而该伪类原生语义化反映 placeholder 显示状态。
为什么 :placeholder-shown 是唯一靠谱的纯 CSS 空状态检测方式
:empty 对 <input> 完全无效——它只匹配没有子节点的元素，而 <input> 是自闭合标签，永远不满足条件。JavaScript 可以读 value，但纯 CSS 没法监听 DOM 属性变化。:placeholder-shown 是浏览器原生提供的语义化钩子：只要 placeholder 文本正在显示（即 value === "" 且未被用户覆盖），该伪类就生效。
必须确保 <input> 带 placeholder 属性，哪怕只是空格：placeholder=" "。Chrome/Firefox 不触发无 placeholder 的 :placeholder-shown；Safari 15.4+ 才完整支持，旧版需 JS 回退。
以下情况会意外失效：
-
type="number"或type="date"清空后value可能为""，但 placeholder 不显示 →:placeholder-shown不匹配 -
placeholder=""（空字符串）行为不一致：部分浏览器仍触发，部分忽略，应避免
:placeholder-shown 的典型样式控制场景
最常见需求是：输入框为空时边框变红、加阴影、或显示提示文字；一旦开始输入，样式立刻恢复。这比监听 input 事件更轻量，且无需 JS 干预。
立即学习“前端免费学习笔记（深入）”；
正确写法示例（给空状态加红色边框）：
input {
border: 1px solid #ccc;
}
input:placeholder-shown {
border-color: #e53e3e;
}
⚠️ 注意：input:placeholder-shown::after 无效——<input> 是替换元素，不支持伪元素。想加提示文字，得用兄弟元素配合：
- 在
<input>后紧跟一个<span class="hint"></span>，再写input:placeholder-shown + .hint { display: block; } - 或用外部
<label></label>包裹，通过label input:placeholder-shown + span控制提示
与 :focus 和 :valid 搭配时的优先级陷阱
:placeholder-shown:focus 表示“已聚焦但尚未输入任何字符”，这个状态在点击输入框瞬间就成立；一旦敲入第一个字符，:placeholder-shown 立刻失效，不管内容是否合法（比如邮箱格式错误）。
常见误用：
- 以为
:placeholder-shown:not(:valid)能表示“有输入但非法”——错，:placeholder-shown和:valid互斥，不可能同时为真 - 想用
:placeholder-shown替代表单校验逻辑——它只反映“空”，不反映“有效”或“必填”
真实表单需要分层处理：:placeholder-shown（空）→ :focus（正在输）→ :valid/:invalid（输完校验）。
兼容性补漏和性能提醒
在 Safari 15.3 及更早版本中，:placeholder-shown 不可用；type="search" 在部分 Android 浏览器中也有兼容问题。如需强兼容，必须用 JS 监听 input 和 blur 事件，动态添加 has-value 类：
input.addEventListener('input', () => {
this.classList.toggle('has-value', this.value.trim() !== '');
});
input.addEventListener('blur', () => {
this.classList.toggle('has-value', this.value.trim() !== '');
});
注意：仅监听 input 事件不够——粘贴后失焦可能跳过该事件，blur 是必要补漏。CSS 层面保持简洁：input.has-value { border-color: #28a745; } 即可。
真正容易被忽略的是：placeholder 内容本身会影响视觉一致性。如果 placeholder 字体/颜色和用户输入不统一，空状态样式再准，用户也感知不到“这是同一个输入框的状态切换”。
