相邻兄弟选择器匹配校验提示元素需确保.error-message紧邻input后且同级：结构必须为，禁止嵌套、空格、换行或注释；input:focus + .error-message有效但要求提示元素初始可渲染，推荐opacity:0+height:0隐藏；:valid/:invalid可触发样式但safari兼容性受限；错位多因盒模型或层叠上下文，应设display:block/inline-block并避免margin-top微调；dom结构刚性失效时需改用js切换class或属性选择器。
相邻兄弟选择器怎么匹配校验提示元素？
必须确保 .error-message 紧跟在 input 后面，且同级——不能嵌套在别的容器里，也不能中间插其他元素。浏览器只认「紧挨着的下一个兄弟」，多一个空格文本节点、换行符或注释都不行。
- ✅ 正确结构：
<input type="text" class="form-input"><span class="error-message">必填</span> - ❌ 错误结构：
<input><div><span class="error-message">...</span></div>（被div隔开） - ❌ 错误结构：
<input>\n<!-- 注释 -->\n<span class="error-message"></span>（注释破坏兄弟关系）
input:focus + .error-message 为什么没效果？
因为 :focus 是伪类，它作用于 input 自身，而相邻兄弟选择器 + 是从「前一个元素」出发找「后一个」。所以 input:focus + .error-message 是合法写法，但前提是：提示元素必须在 input 后面，且初始状态要可渲染（不能 display: none 或 visibility: hidden —— 后者仍占布局空间，但视觉不可见，容易误判）。
- 推荐用
opacity: 0; height: 0; overflow: hidden;配合过渡隐藏，避免布局跳动 - 别用
display: none，否则 CSS 选择器根本找不到该元素 - 若提示需动态插入 JS，务必确保插入位置是
input的直接下一个兄弟节点
如何配合 :valid/:invalid 实现实时校验样式？
:valid 和 :invalid 依赖表单控件的原生约束（如 required、type="email"、pattern），它们触发时机比 JS 更早，但兼容性要注意：Safari 对 :invalid 的初始触发较保守（可能等 blur 后才生效）。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 基础写法：
input:invalid + .error-message { opacity: 1; height: auto; } - 避免和
:user-invalid混用——后者是实验性标准，目前仅 Firefox 支持较完整 - 如果用了自定义校验逻辑（比如 AJAX 检查用户名是否可用），必须靠 JS 切换
input的class（如is-invalid），再写input.is-invalid + .error-message
为什么提示文字总被遮挡或错位？
相邻兄弟选择器本身不控制定位，错位几乎全是盒模型或层叠上下文导致。常见原因：父容器 overflow: hidden 裁剪了提示框；input 设了 vertical-align: middle 但 span 默认 baseline 对齐；或者 .error-message 没设 font-size 导致继承异常。
- 给提示元素加
display: block;或display: inline-block;明确行为 - 避免依赖
margin-top微调位置——改用transform: translateY()更稳定 - 检查父级是否设置了
transform或will-change，这会创建新层叠上下文，影响z-index生效
实际项目里最常被忽略的是 DOM 结构刚性要求：CSS 选择器不会“智能绕过”包装容器。哪怕只为了加个图标而套一层 <div class="input-wrapper">，<code>input + .error-message 就立刻失效——这时候就得切到 JS 控制 class，或者改用属性选择器配合 [data-invalid] 这类更灵活的方案。
