不能只用:valid或:placeholder-shown单独控制浮动标签，因:valid依赖required等验证属性，无约束时空值也视为valid；:placeholder-shown在用户聚焦或输入空格时立即失效，但标签应保持上浮；两者均无法覆盖“空且聚焦”“非空”“空且未聚焦”全部状态。
为什么不能只用 :valid 或 :placeholder-shown 单独控制浮动标签
:valid 依赖表单验证逻辑，比如 required、type="email" 或 pattern；没有这些约束时，空值也视为 valid，标签就永远不会上浮。而 :placeholder-shown 只在 placeholder 正显示时为 true——用户一聚焦或输入一个空格，它立刻失效，但此时标签理应保持上浮。两者单独用都会漏掉关键状态。
:valid 和 :placeholder-shown 怎么组合才覆盖全部场景
必须同时响应三种状态：空且聚焦、非空（无论是否聚焦）、空且未聚焦。推荐这样写：
-
input:placeholder-shown + label→ 标签沉底（初始态） -
input:focus + label→ 空但已点击，标签上浮 -
input:valid + label→ 有内容且通过校验，标签固定上浮
注意顺序：:placeholder-shown 规则必须放在最后，否则会被前面的 :focus 或 :valid 覆盖。另外，:valid 在 input 值为 "0"（数字框）、" "（空格）时可能不触发，不如 :not(:placeholder-shown) 稳定。
HTML 结构和属性缺一不可
浮动标签不是纯 CSS 魔术，它对 DOM 结构很敏感：
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- label 必须紧跟在 input 后面，且是**下一个兄弟元素**，用
+选择器才能生效 - input 必须带
placeholder属性（哪怕写成placeholder=""），否则:placeholder-shown永远不匹配 - 如果用了
required，:valid才有意义；没加required却指望:valid判断“是否有输入”，基本无效
常见错误：把 label 放 input 前面、中间插了个图标、或者 JS 动态设置 placeholder —— 这些都会让伪类失效。
兼容性和边界情况怎么处理
:valid 和 :placeholder-shown 在 IE 中完全不支持，Edge 16+、Chrome 57+、Firefox 51+、Safari 15.4+ 才可用。更麻烦的是边界行为：
- 用户粘贴全角空格、零宽字符、换行符，
:placeholder-shown会失效，但 value 实际仍是“空” -
:valid对type="number"输入"0"默认不触发（因为 0 是有效数字），但业务上可能要求“非空”，这时 UI 和校验逻辑就错位了 - 失焦后，仅靠
:valid能保持上浮，但若字段非必填又没 pattern，:valid就不可靠，得 fallback 到:not(:placeholder-shown)
真正健壮的做法不是二选一，而是把 :not(:placeholder-shown) 当主力，:valid 仅作补充校验层——毕竟 CSS 层面没法做 trim 或正则匹配，能依赖的只有浏览器渲染 placeholder 的那一刻。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
