纯 CSS 无法替代完整 JS 表单验证，但能接管 70% 以上前端实时反馈逻辑；需合理使用 :valid/:invalid、:has()、:nth-child(n of ...) 及 data- 属性配合 CSS 变量实现声明式校验样式，注意浏览器兼容性与状态同步滞后性。
纯 CSS 无法替代完整 JS 表单验证（比如异步用户名查重、自定义规则、后端返回错误），但能接管 70% 以上的前端实时反馈逻辑——只要用对选择器，就能让“输入即校验”这件事彻底脱离 JS 监听和 class 切换。
用 :valid/:invalid 做基础状态反馈，但必须控制触发时机
浏览器对 :invalid 的判定是严格的：空的 required 输入框一加载就匹配，type="email" 在失焦后才计算。这不是 bug，是规范行为。
- 别写
input:invalid { border-color: red; }—— 页面打开就红边框，体验极差 - 推荐组合：
input:not(:placeholder-shown):invalid（需有placeholder属性）或input.touched:invalid（JS 在blur或input时加touched类） -
:user-invalid更干净，但 Safari 16.4+ 才稳定支持，生产环境慎用 - 注意：
:valid/:invalid只响应原生约束（required、pattern、type），JS 改value后不会自动重算状态
用 :has() 让父容器响应子元素验证状态
过去必须用 JS 给 .form-group 加 is-invalid 类才能高亮整个表单项；现在一行 :has() 就能声明式实现：
-
.form-group:has(input:invalid)→ 父容器变红边框 -
label:has(input:not(:placeholder-shown):valid)→ 仅当用户输过且合法时，才给 label 加绿色图标 - ⚠️ 注意兼容性：Chrome 105+、Firefox 121+、Safari 15.4+ 支持，但 Safari ≤15.3 完全不支持；必须用
@supports selector(:has(*))包裹降级 - HTML 结构要干净：
:has(> input:invalid)中的换行符、注释都会让input不再是第一个子节点，导致规则静默失效
用 :nth-child(n of ...) 实现“填满 N 项才启用提交”
这类“进度感知”需求（比如填满 3 个字段才亮按钮）过去总用 JS 数 querySelectorAll('input:valid').length；CSS 现在也能做，且更轻量：
使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。
-
button:disabled:has(~ input:valid:nth-child(3 of :valid))不可行 ——:has()不能嵌套伪类 - 正确写法：
button:disabled:has(~ input:valid:nth-child(3 of input))+ 配合 JS 控制按钮 disabled 状态（CSS 只负责样式） - 更实用的是反向控制：
.form:has(input:valid:nth-child(3 of input)) button:not(:disabled)→ 当至少 3 个input为:valid时，移除按钮的禁用样式 - ⚠️
n of不是计数器，它只在匹配的选择器集合里找第 n 个；若想统计总数，仍需 JS 或服务端配合
用 data- 属性 + CSS 变量处理 JS 主导的验证状态
后端返回的错误、异步校验结果、自定义规则（如“密码需含大小写字母”）无法靠 :valid 触发，这时必须 JS 参与，但样式层仍可完全交由 CSS 控制：
- JS 只负责设置：
input.setAttribute('data-valid', 'false')或input.dataset.error = '密码强度不足' - CSS 写：
input[data-valid="false"] { border-color: #e53e3e; }，避免直接操作style属性 - 用 CSS 变量统一映射状态：
input[data-state="error"] { --border-color: #e53e3e; }，再在通用规则中引用border-color: var(--border-color); - ⚠️
[data-valid=false]写法在部分浏览器解析异常，必须加引号：[data-valid="false"]
真正容易被忽略的不是语法，而是状态同步的滞后性：CSS 伪类永远比 JS 执行慢半拍——哪怕你刚调用 reportValidity()，:invalid 也要等下一个渲染帧才生效；而 :has() 的匹配更是基于 DOM 树真实结构，任何空格、注释、动态插入都可能让它失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
