.form-row:has(:invalid) 高亮整行需处理兼容性、验证触发时机和动态字段刷新：Safari 15.4+ 支持但对伪类组合敏感，Firefox 121+ 才默认支持；:invalid 需交互或 reportValidity() 触发，首次加载时无效；应改用 :is(input:invalid, select:invalid, textarea:invalid) 避免遗漏；后端错误需加 .error 类并配 :has(.error)；动态新增字段需手动 class 切换触发重算；推荐用 outline 和 rgba 背景避免布局抖动；视觉高亮不替代 JS 的 disabled 控制。
直接用 .form-row:has(:invalid) 就能高亮整行，但必须处理好浏览器兼容、验证触发时机和动态字段刷新这三件事。
为什么 .form-row:has(input:invalid) 在 Safari 里没反应？
Firefox 当前（2026 年）仍不支持 :has()，Safari 15.4+ 支持但对伪类组合敏感。常见失效原因有：
-
:invalid不是“天生生效”的——它依赖用户交互（如失焦、提交）或 JS 调用reportValidity()才会计算，空表单首次加载时所有字段都是:valid - 写成
.form-row:has(input:invalid)会漏掉select和textarea，应统一用:is(input:invalid, select:invalid, textarea:invalid) - Safari 对嵌套过深的选择器（比如
.form-row:has(.field-group:has(input:invalid))）可能跳过匹配，建议扁平化结构
如何让错误高亮真正响应后端校验结果？
原生 :invalid 只管 HTML5 约束（required、type="email"），后端返回的错误（如“用户名已被占用”）需手动标记。这时不能只靠 :invalid：
- 后端校验失败后，给对应输入框加
class="error"，再写.form-row:has(.error) - 避免混合使用
:has(.error)和:has(:invalid)——它们触发时机不同，样式可能错位 - 如果字段是动态增删的（如地址列表），新增 DOM 节点不会自动触发
:has()重计算；可简单触发一次 class 切换：row.classList.toggle('force-repaint')
高亮整行时，哪些样式改动最稳妥？
别只改边框颜色——很多表单行本身没有 border，直接设 border: 2px solid #ef4444 会撑开布局。推荐组合方案：
立即学习“前端免费学习笔记（深入）”；
- 用
outline避免重排：.form-row:has(:is(input:invalid, select:invalid, textarea:invalid)) { outline: 2px solid #ef4444; outline-offset: -2px; } - 配合
transition控制变化节奏，防止抖动：transition: outline 0.2s ease; - 如果需要背景色，优先用半透明白色遮罩而非纯色：
background-color: rgba(239, 68, 68, 0.05);，避免与已有背景冲突
最易被忽略的一点：CSS 高亮只是视觉反馈，:has() 完全不干预表单逻辑。哪怕整行红了，用户仍能点击提交按钮——真正的禁用控制必须由 JS 通过 form.checkValidity() 和 button.disabled 同步完成。
