:required:invalid 是唯一能精准标识“必填但未填”状态的伪类组合，因 :required 仅声明必填属性，:invalid 仅表示值违规，二者交集才锁定“该填未填且被浏览器判定无效”的情形。
:required 和 :invalid 是两个独立但常配合使用的伪类，不能单靠其中一个实现“必填且未填”的精准样式控制；必须组合成 input:required:invalid 才能真正标出「该填却没填」的项。
为什么 :required:invalid 才是关键组合
:required 只表示「这个字段被声明为必填」，它不关心值是否为空或合法；:invalid 表示「当前值违反了至少一条验证规则」，但它可能因字段无 required、type 或 pattern 而根本不触发。只有两者交集，才能锁定「本该填、还没填、浏览器已判定无效」的状态。
- 空的
<input required>在页面加载后立即匹配:required:invalid（Chrome/Firefox/Safari 15.4+ 均支持） - 若只写
input:invalid，而元素没加required或其他验证属性，样式完全不会生效 -
select:required:invalid需确保默认<option></option>没有value（如<option disabled selected>请选择</option>），否则即使未选也会被当作有效
:invalid 触发时机与常见误判
:invalid 不是“用户删空才触发”，而是只要值不满足约束就匹配——比如 type="email" 输入 a@，或 pattern="^1[3-9]\d{9}$" 输入 123，都会立刻进入 :invalid 状态，哪怕字段非必填。
- 空值 +
required：加载即:invalid，无需用户交互 - 非空但格式错（如
type="number"输入abc）：输入瞬间就:invalid - 想延迟到用户失焦后再标红？改用
:user-invalid（Chrome 107+ / Safari 16.4+ / Firefox 124+ 支持），但注意它不回溯初始空值状态 -
textarea和select[multiple]同样适用，但普通select必须配required+ 无值默认项
样式冲突和浏览器兼容性陷阱
写 input:required:invalid { border-color: red; } 很容易被框架 CSS 或重置样式覆盖，尤其当用了 Bootstrap、Ant Design 等自带表单样式的库。
- 优先级不够？在选择器末尾加
!important是临时解法，更稳妥的是提升 specificity，比如form input:required:invalid或.my-form input:required:invalid - Safari 15.3 及更早版本对
:invalid的background和box-shadow支持不稳定，border-color最可靠 - 自定义组件（如封装的
<myinput></myinput>）不继承原生验证逻辑，:invalid完全不生效，必须靠 JS 注入is-invalid类 - 隐藏字段（
type="hidden"）或display: none元素，浏览器跳过验证，:invalid不会匹配
别忽略 :user-invalid 与 JS 的协同成本
如果项目里混用 JS 校验（比如调用 setCustomValidity()）和原生 :invalid，视觉状态极易和 JS 内部 validity 状态脱节——比如 JS 清除了错误但用户还没失焦，:invalid 样式还挂着。
- 统一用 JS 控制：移除所有
required/pattern，改用reportValidity()+ 监听invalid事件并preventDefault()，再手动切is-invalid类 - 保留原生校验时，务必在 JS 中同步更新：监听
input和blur，根据element.validity.valid主动增删类，避免依赖伪类自动切换 -
:user-invalid虽能规避初始空值干扰，但它本身是实验性特性，旧版浏览器 fallback 方案必须存在（比如降级为:invalid）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
