表单项容器高亮需用.field:has(input:invalid)而非.field:invalid，因:invalid仅作用于表单元素本身；正确触发条件为.field:has(input:not(:placeholder-shown):invalid)，避免placeholder显示时误判；错误提示应通过opacity/height过渡控制而非display，hover效果须用:focus-within或JS实现。
表单项容器高亮依赖 input:invalid 时，必须用 :has() 包裹容器选择器
直接写 .field:invalid 不生效——:invalid 只作用于 input 元素本身，无法上溯到父容器。正确做法是让容器“感知”内部 input 的状态：.field:has(input:invalid) 才能触发样式变更。
常见错误是漏掉 input 这一层，比如写成 .field:has(:invalid)，这会匹配任何带 :invalid 伪类的子元素（包括自定义元素），但原生表单控件中只有 input、select、textarea 支持该伪类，且必须显式写出标签名。
-
:has()参数里不能省略元素类型，:has(:invalid)是无效语法，浏览器会忽略整条规则 - 若容器内有多个 input，只要任意一个匹配
input:invalid，整个.field就会被选中 - 搭配
transition使用时，注意:has()触发的状态切换是即时的，无延迟，适合做边框变色、背景微调等轻量反馈
避免 placeholder 消失即触发校验：组合 :not(:placeholder-shown) 和 :invalid
只用 input:invalid 会导致用户刚点进去、还没输内容就高亮错误——因为 required 字段在空值时也满足 :invalid。真正想表达的是“已开始输入但内容非法”，得排除 placeholder 还在的状态。
正确组合是：.field:has(input:not(:placeholder-shown):invalid)。这里 :not(:placeholder-shown) 表示 placeholder 已隐藏（即用户至少敲过一个字符或聚焦后失焦），再叠加 :invalid 才算有效触发条件。
-
input[value!=""]不可靠——它读的是初始value属性，不随用户输入更新 -
:placeholder-shown在type="number"或type="email"等场景下行为稳定，比监听input事件更轻量 - 如果字段没设
placeholder，:placeholder-shown永远为 false，此时该组合失效，需改用:user-invalid（仅部分浏览器支持）或退回到 JS 监听
错误提示显示/隐藏必须与 :has() 同级控制，不能靠 display: none 初始隐藏
很多人把 .error-msg 写成默认 display: none，再用 .field:has(input:invalid) .error-msg { display: block; } 控制显示。这看似合理，但存在竞态问题：当用户快速输入又删空时，:invalid 状态可能短暂消失，导致错误提示闪一下又收起。
更稳的做法是让错误提示始终在 DOM 中，仅靠透明度或高度过渡来隐藏：
- 设置
.error-msg { opacity: 0; height: 0; overflow: hidden; transition: opacity 0.15s, height 0.15s; } - 触发时用
.field:has(input:not(:placeholder-shown):invalid) .error-msg { opacity: 1; height: auto; } - 避免用
visibility: hidden，因为它仍占布局空间，容易导致容器高度跳动
:has() 在表单中不支持 :hover，但可用 :focus-within 替代部分交互
想实现“鼠标悬停 input 时高亮整个 field”？别写 .field:has(input:hover)——所有主流浏览器目前都不支持 :has(:hover)，规范明确将其列为“动态伪类”，禁止在 :has() 内使用。
替代方案是用 :focus-within，它原生支持且兼容性更好（Chrome 60+、Firefox 61+、Safari 15.4+）：
.field:focus-within { border-color: #2563eb; background: #f8fafc; }- 它覆盖两种情况：input 获得焦点，或用户点击 label（label 关联了 for/id）后 input 自动聚焦
- 如果确实需要 hover 效果，只能用 JS 监听
mouseenter/mouseleave并切换 class，:has()无法接管
实际项目中最容易被忽略的一点是：:has() 的匹配是**一次性静态计算**，它不会监听 DOM 结构变化。比如通过 JS 动态插入新的 input 到已有 .field 中，这个新 input 的 :invalid 状态不会自动触发父容器重匹配——必须手动触发一次重排（如修改容器 style.display）或换用 :focus-within 这类持续监听的伪类。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
