:placeholder-shown用于检测输入框为空且原生placeholder可见的状态，需配合input的placeholder属性（如空格）使用；结合~兄弟选择器联动label实现浮动效果，并用transform动画替代top以保障性能。
用 :placeholder-shown 判断占位符是否显示
浏览器原生 placeholder 无法直接做上移动画，必须把它“藏起来”，再用 <label> 模拟浮动标题。关键在于识别“占位符正在显示”这个状态——:placeholder-shown 就是为此设计的伪类，它只在输入框为空且 placeholder 可见时匹配。
注意：:placeholder-shown 要求 input 必须有 placeholder 属性（哪怕值是空格 " "），否则选择器不生效。别写成 input:placeholder-shown（漏了冒号前的冒号），正确写法是 input:placeholder-shown。
- ✅ 正确结构：
<input placeholder=" "><label>用户名</label> - ❌ 错误写法：
input:placeholder-shown::placeholder（语法无效） - ⚠️ 兼容性：Chrome 47+、Firefox 51+、Safari 11.1+ 支持；IE 完全不支持，需 JS fallback
用 ~ 通用兄弟选择器联动 label
label 必须和 input 在同一父容器内，且 DOM 顺序在 input 之后，才能用 ~ 选中它。如果 label 在 input 前面，CSS 无法反向选择。
常见错误是把 label 包在 input 里，或用 + 相邻选择器但中间插了其他元素（比如图标 <span>），导致样式失效。
立即学习“前端免费学习笔记（深入）”；
- ✅ 推荐 HTML：
<div class="form-group"><input><label></label></div> - ✅ CSS 触发规则：
input:not(:placeholder-shown) ~ label, input:focus ~ label - ⚠️
input:focus + label只在label紧跟input时有效；~更宽松，推荐优先用
让 label 上浮的关键 transform 和定位
label 默认要绝对定位在输入框内部，初始位置靠 top 和 transform: translateY() 微调对齐。上浮动画本质是改变 transform 的 scale() 和 translate() 组合值，不能只改 top —— 因为 top 不是可动画的合成属性，会触发重排，卡顿明显。
- ✅ 初始态：
position: absolute; top: 50%; transform: translateY(-50%) scale(1); - ✅ 上浮态：
transform: scale(0.75) translate(-2px, -28px); - ⚠️ 必须加
transition: transform 0.2s ease，且声明在非伪类规则里（比如.form-group label），否则动画不生效 - ⚠️
pointer-events: none一定要加，否则label会遮挡input的点击区域
隐藏原生 placeholder 避免视觉冲突
如果不处理，原生 placeholder 文字会和上浮的 label 重叠。最稳妥的方式是让它透明，而不是用 display: none（后者可能影响可访问性）。
- ✅ 正确隐藏：
input:placeholder-shown::placeholder { color: transparent; } - ⚠️ 注意各浏览器前缀：虽然现代浏览器已支持无前缀写法，但若需兼容旧版 Safari 或 Firefox，仍需补
::-webkit-input-placeholder等 - ⚠️ 别写
input::placeholder { display: none }—— 这会导致 placeholder 完全不可见，且部分屏幕阅读器可能读不出提示文本
transform 是否走 GPU 加速，以及父容器有没有意外创建层叠上下文（比如 opacity < 1 或 filter）。如果动画卡顿，先检查这些隐性干扰项。 
