真要实现稳定上浮标签必须组合其他状态，因:placeholder-shown仅在占位符显示时生效且易失效；最简健壮方案是用:focus-within配合父容器包裹，并显式设置placeholder=" "。
:placeholder-shown 本身不能做出悬浮标签，它只是个“占位符正在显示”的快照信号——用户一打空格、一聚焦、一粘贴零宽字符，它就立刻失效，标签直接掉回原位。真要实现稳定上浮，必须组合其他状态。
为什么单独写 :not(:placeholder-shown) + label 会掉帧
这个选择器只在 placeholder 消失时生效，但以下情况都会让它断开：
- 用户聚焦输入框但还没输任何内容（
:placeholder-shown仍为 true，:not()不触发） - 输入一个全角空格或换行符（
value逻辑为空，但伪类已失效） -
type="number"在 Safari ≤15.4 中偶发不匹配 - DOM 中
label不紧邻input（中间有注释、图标、span都会让+失效）
必须搭配 :focus-within 或 :focus 才能覆盖“空但已交互”
最简健壮方案是用父容器包裹并依赖 :focus-within，它不依赖 placeholder，也不挑 input 类型：
<div class="input-group"> <input placeholder=" "><label>邮箱</label> </div>- CSS 中写：
.input-group:focus-within label控制上浮，.input-group input:not(:placeholder-shown) + label作 fallback -
:focus-within必须放在规则末尾，否则会被前面的:not(:placeholder-shown)覆盖 - IE 完全不支持
:focus-within，旧 Edge 需 16+；Safari 15.4+ 才稳定
placeholder 属性不是可选项，而是开关
没有 placeholder 属性，:placeholder-shown 永远不会匹配——哪怕 value 是空字符串。
- 必须显式写
placeholder=" "（一个空格），不能留空placeholder=""，也不能省略 - React/Vue 中动态设置 placeholder 时，首次渲染就得带值，否则初始态丢失
- 移动端 Safari 有 placeholder 渲染延迟，加
placeholder=" "可缓解 - 别用
value=""+placeholder混用去“模拟空态”，:placeholder-shown只看 placeholder 是否显示
transition 和定位细节决定是否真“浮动”
标签动不起来，90% 是因为 transition 没写对位置：
-
transition必须写在label的默认样式里，不能只写在:focus + label中 - 上浮推荐用
transform: translateY(-1.2em) scale(0.85)，比top性能更好，不触发重排 -
input要预留足够padding-top，避免文字被上浮的 label 遮住 - 加
input:focus::placeholder { color: transparent }隐藏原生占位符，防止和 label 重叠；Safari 不稳时改用opacity: 0 - 注意 z-index：上浮后 label 盖住光标？不是位置错了，是层叠上下文没理清
:placeholder-shown 天然做不到这点，得靠组合状态兜底，或者干脆交由 JS 控制 has-value 类。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
