:invalid伪类默认加载即高亮空required字段，因html5规范视其为“已提交但无效”；应组合:not(:placeholder-shown)或:user-invalid（新浏览器）控制时机，并用:has()或js实现容器高亮，同时保障可访问性与多层视觉反馈。
:invalid 伪类能自动高亮校验失败的表单控件，但直接用会一打开页面所有 required 字段就变红——这不是 bug，是 HTML5 规范行为：空值即非法。真正可用的方案必须控制触发时机、收束作用范围，并补足可访问性。
为什么 :invalid 一加载就标红？
因为浏览器把空的 required 字段判定为“已提交但无效”，:invalid 立即匹配。它不等用户输入，也不管有没有交互。
- 必须给
input加placeholder属性，否则:not(:placeholder-shown)条件永远不成立 - 推荐组合：
input:invalid:not(:placeholder-shown)，只在“用户输过但错了”时生效 -
:user-invalid更符合直觉（编辑后才校验），但仅 Chrome 102+ / Firefox 119+ / Safari 16.4+ 支持，不能当默认方案 - 旧版 Safari 对
:user-invalid兼容性反而更好，但新版已统一，不必降级迁就
怎么让错误样式只作用于真实控件，不误伤包装容器？
:invalid 只对 input、select、textarea 生效，对 div 或自定义组件完全无效。想高亮整个表单项，得靠 :has() 或 JS。
- 现代写法（Chrome 111+ / Safari 15.4+ / Firefox 120+）：
.form-group:has(input:invalid)，父容器直接响应子控件状态 - 兼容 fallback：用 JS 监听
blur后手动加has-error类，再写.form-group.has-error - 别写
.form-control:invalid这种泛选择器——权重低，容易被框架样式覆盖；改用input[required]:invalid，意图明确且优先级高 - 如果用了 Shadow DOM 或 CSS-in-JS，确认样式是否穿透到真实节点，
:invalid可能被隔离失效
边框变红就够了吗？视觉反馈要多层叠加
纯红色边框对色觉障碍用户不友好，也缺乏信息密度。错误提示需要颜色 + 图标 + 空间留白 + 可读文案协同工作。
- 图标建议用内联 SVG：
background-image: url("data:image/svg+xml,...")，避免额外请求，且能直接控制颜色 - 留出右侧 padding：
padding-right: 28px，防止文字被图标遮挡 - 过渡只能用可插值属性：
transition: border-color .2s, opacity .2s, transform .2s；display: none和transition不能共存 - 别删
outline——移除焦点轮廓会损害键盘用户可访问性；用box-shadow替代或叠加
为什么 label 浮动到输入框上方后总被盖住？
不是 z-index 没设对，而是浏览器默认把聚焦态表单控件渲染在顶层。强行提 z-index 可能创建新层叠上下文，反而破坏定位参照。
- 必须把
label和input放在同一个position: relative容器里 -
label要写在input标签之前，且同级；设position: absolute; top: -24px; left: 0; -
input保持position: static，不要设z-index - 提示语文字必须写在
label标签内（不是::after），否则屏幕阅读器可能读不到
真正关键的不是怎么写 CSS，而是 HTML 是否带 required、type="email"、pattern 这些约束属性——:invalid 不校验，只报信。一旦漏掉这些，样式再漂亮也毫无意义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
