:placeholder-shown伪类仅在input/textarea有placeholder属性且value为空（trim后）时生效；旧版Safari兼容性差，不可替代JS空值校验，也不等同于:focus或:empty。
placeholder-shown 伪类不生效的常见原因
它只在 <input> 或 <textarea></textarea> 有 placeholder 属性且当前值为空（包括仅含空白字符）时才匹配。没有 placeholder 属性，或输入框已有内容（哪怕是一个空格），:placeholder-shown 都不会触发。
- 确保元素确实带
placeholder属性：<input placeholder="姓名">，而不是靠 JS 动态插入或 CSS 模拟 - 检查值是否真的为空：
input.value.trim() === ""，否则伪类失效 - 某些旧版 Safari（≤15.4）对
:placeholder-shown支持不稳定，需加::-webkit-input-placeholder回退样式
与 :focus-within 或 :empty 混用时的逻辑陷阱
:placeholder-shown 描述的是“占位符正在显示”的状态，和焦点、内容是否为空不是一一对应关系。比如用户聚焦后输入空格再删除，value 变成 " "，此时占位符消失，:placeholder-shown 不匹配，但 :empty 也不匹配（因为节点非空），:focus-within 却仍为真——三者语义完全不同。
- 别用
:placeholder-shown替代:focus或:valid；它只管“占位符有没有露脸” - 若想实现“空且聚焦”效果，得组合写：
input:placeholder-shown:focus -
:empty对<input>无效（它是空元素，无子节点，但伪类不作用于替换元素），别试
在表单验证中误当“空值检测”使用
它不能替代 JavaScript 的空值判断。CSS 无法感知语义上的“无效”或“必填未填”，只能响应 DOM 层面的占位符可见性。用户粘贴空格、输入零宽字符、或用自动填充填了不可见字符，都可能导致 :placeholder-shown 提前退出，但表单其实仍未有效。
- 前端校验必须用 JS 检查
input.value.trim()，不能只靠样式变色 - 服务端永远要重新验证，
:placeholder-shown连“是否提交”都管不了 - 若配合
required属性，注意：浏览器原生提示不依赖此伪类，两者无联动
兼容性与性能小提醒
Chrome 47+、Firefox 51+、Safari 9+、Edge 79+ 均支持，但 iOS Safari 15.4 之前存在偶发不重绘问题；它本身无运行时开销，但过度嵌套选择器（如 .form-group input:placeholder-shown + label）可能影响渲染效率。
立即学习“前端免费学习笔记（深入）”；
- 避免写成
input:not(:placeholder-shown)来“反向控制”，可读性差且部分老浏览器解析异常 - 动画慎用：在占位符切换瞬间触发
transition容易卡顿，建议加will-change: opacity或改用 JS 控制类名 - 构建工具如 PostCSS 的 autoprefixer 默认不补
:placeholder-shown，因为它不是需要前缀的属性，无需额外配置
