:placeholder-shown 伪类用于为 placeholder 正在显示的 或 添加状态样式，需配合原生 placeholder 属性使用，不支持 ie，safari 存在渲染延迟，不可与 ::placeholder 嵌套，且 type 属性兼容性需注意。
input元素placeholder显示时怎么加样式
直接用 :placeholder-shown 伪类就行，但它只对 <input> 和 <textarea></textarea> 生效，且必须是原生 placeholder 属性触发的占位符（不是 JS 模拟的）。
常见错误是写成 ::placeholder —— 那是改占位符文字样式的，而 :placeholder-shown 是给整个输入框加“当前 placeholder 正在显示”这个状态的样式。
- 必须配合
placeholder属性存在才触发，空值或没设该属性时伪类不匹配 - IE 完全不支持，Edge 16+ 才开始支持，Safari 9.1+ 支持但有渲染延迟问题
- 不能链式写成
input:placeholder-shown:focus，因为 placeholder 隐藏后状态就断了；想同时处理聚焦+占位符显示，得用 JS 监听input事件判断值是否为空
:placeholder-shown和:focus一起用会失效吗
不会失效，但逻辑容易错：当用户点击输入框，:focus 立刻生效，而 :placeholder-shown 在输入前仍为真，两者可以共存。但一旦用户开始输入，:placeholder-shown 就立刻移除。
典型场景是做“浮动标签”（label 从顶部滑下来），需要同时满足“有焦点”且“值为空”——这时候仅靠 CSS 不够，得补 JS：
立即学习“前端免费学习笔记（深入）”；
input.addEventListener('input', () => {
input.classList.toggle('has-value', input.value !== '');
});
- CSS 中写
input:focus + label, input.has-value + label { transform: translateY(-20px); } - 纯 CSS 方案里，
input:focus:placeholder-shown + label能覆盖“刚聚焦还没输”的瞬间，但输完再删空，:placeholder-shown才回来，中间有状态空档 - 移动端 Safari 对快速聚焦-失焦的
:placeholder-shown切换响应滞后，视觉上会闪一下
为什么加了:placeholder-shown却没反应
大概率是选择器权重或匹配条件没满足。最常踩的三个坑：
- 写了
div input:placeholder-shown却忘了父容器没设display: block或高度，导致子元素根本不可见 - 用了
type="number"或type="email"，某些浏览器（如旧版 Chrome）在这些类型上不触发:placeholder-shown，换成type="text"测试一下就能确认 - CSS 文件里有语法错误（比如漏了分号、括号不闭合），导致整条规则被浏览器忽略——打开 DevTools 的 Styles 面板，看这条规则是否出现在 computed 样式里
和::placeholder混用要注意什么
:placeholder-shown 控制的是“输入框本身”，::placeholder 控制的是“占位符文字”，二者定位完全不同，但经常要协同使用。
比如想让 placeholder 显示时边框变浅，文字变灰：
input:placeholder-shown {
border-color: #ddd;
}
input::placeholder {
color: #999;
}
-
::placeholder在 Firefox 里叫::-moz-placeholder，需要单独兼容；而:placeholder-shown所有现代浏览器都统一用标准写法 - 如果给
input:placeholder-shown::placeholder加样式，部分浏览器（如 Safari）会忽略——不要嵌套写，分开声明更稳 - 动画慎用：在
:placeholder-shown上加transition没问题，但::placeholder的颜色过渡在 iOS 上基本不生效
真正麻烦的是 placeholder 显示逻辑本身依赖浏览器实现细节：比如 Safari 在 input 失去焦点后，若值为空，会延迟几十毫秒才重新应用 :placeholder-shown，这时候 JS 如果立刻读 matches(':placeholder-shown') 就可能拿到 false。
