Peer选择器需input与提示元素同父且提示在后，依赖peer类标记及peer-*前缀工具类生效；:invalid需验证属性和用户交互，:user-invalid更可靠；失焦显示需peer-focus-within配合父容器；动画失效常因height:auto或display:none，应改用max-height或opacity。
Peer选择器怎么匹配表单元素和对应提示？
Peer功能依赖兄弟节点关系，必须让 <input> 和提示元素（如 <span>）处于同一父容器内，且提示元素在 input 后面——否则 peer 类不会生效。Tailwind 的 peer 是一个占位类，本身不产生样式，只用于标记目标元素；真正起作用的是后续带 peer-*: 前缀的工具类。
常见错误是把提示文字放在 <label> 里或隔了 wrapper div，导致 peer-invalid:opacity-100 完全没反应。正确结构示例：
<div class="relative"> <input type="email" required class="peer border px-3 py-2"> <span class="peer-invalid:opacity-100 opacity-0 text-red-500 text-sm">邮箱格式不正确</span> </div>
为什么 :invalid 不触发，但 :required 也没用？
浏览器原生表单验证状态（如 :invalid、:valid、:focus-within）只对具有验证能力的 input 生效，且需满足两个条件：一是有 required 或其他验证属性（如 type="email"、pattern），二是用户已与该字段交互过（blur 或 submit 后）。刚加载页面时，空的 required input 默认是 :invalid，但部分浏览器（尤其是 Safari）会延迟应用该状态，导致初始提示不显示。
- 解决办法：加
novalidate到 form 并改用:user-invalid——它比:invalid更可靠，只要输入值违反约束就立即生效 -
:required只表示字段有 required 属性，不反映验证结果，不能用来控制提示显隐 - 若用自定义验证（比如 JS 调用
setCustomValidity()），需手动 toggledata-invalid并配合peer-data-[invalid]:opacity-100
如何让提示文字在 input 失焦后才出现？
纯 CSS 无法监听 “第一次失焦”，但可以用 :focus-within + 状态标记组合模拟。关键是把父容器设为 focus-within 目标，再结合 input 的验证状态：
立即学习“前端免费学习笔记（深入）”；
<div class="relative peer-focus-within:opacity-100 opacity-0 transition-opacity"> <input type="password" required class="peer"> <span class="peer-invalid:opacity-100 opacity-0">密码不能为空</span> </div>
这里有两个关键点：
-
peer-focus-within必须作用于 input 的父容器（不是 input 自身），且该容器需包含 input 和提示元素 - 提示的显隐由两层控制：父容器的
peer-focus-within:opacity-100（表示用户进过这个区域），叠加 input 的peer-invalid:opacity-100（表示当前无效） - 不要依赖
:blur—— CSS 没有这个伪类
Peer配合transition时为什么动画卡顿或失效？
Peer 触发的样式变更（如 opacity、scale、height）若未声明 transition，默认无动画；但即使写了 transition，也可能因重排/重绘触发失败。最常踩的坑是：对 height: 0 → height: auto 做 transition，CSS 不支持 auto 动画。
- 正确做法：用
max-height替代height，例如max-h-0 overflow-hidden+peer-invalid:max-h-10 - 避免在
peer-*:中使用display: none—— transition 对display无效，应改用opacity+pointer-events-none - 若提示需要从上滑入，可用
transform: translateY(-10px)→translateY(0)，比 top/bottom 更高效
Peer 功能本身不处理时机逻辑，所有“延迟显示”“仅提交后校验”都得靠 HTML 结构、伪类组合或少量 JS 辅助，纯 CSS 的边界在这里很清晰。
