:empty不适用于表单控件，仅匹配无任何子节点的元素；:required仅反映required属性存在与否，不判断实际填写状态；真实验证需结合:valid/:invalid及JS校验。
：:empty 不适用于表单控件的值判断
:empty 只匹配**完全不包含子节点（包括文本节点、元素节点、注释节点）的元素**。它对 <input>、<textarea></textarea>、<select></select> 这类**空元素（self-closing 或无结束标签）无效**——因为它们天生没有子节点，但用户输入的内容并不作为子节点存在，而是通过 value 属性或 DOM 属性体现。
常见误解是写 input:empty { border: 2px solid red; } 想高亮空输入框，实际永远不生效。浏览器会忽略该规则，或在 DevTools 中显示为“不匹配”。
-
<div></div>→ 匹配:empty -
<div> </div>（含空格/换行）→ 不匹配（有文本节点） -
<input value="">→ 不匹配:empty（无子节点，但不是“内容为空”的语义） -
<textarea></textarea>→ 不匹配（即使内容为空，其文本内容是 DOM 的textContent，不是子节点）
：:required 只反映 HTML 属性，不校验实际填写状态
:required 是一个**结构伪类**，仅当元素带有 required 属性时匹配，与用户是否填了值无关。它适合做视觉提示（比如加星号、边框样式），但不能替代 JS 验证逻辑。
例如：input:required:not(:valid) { border-color: #e53e3e; } 才能表达“必填但未填”的状态；单独用 :required 只是“被声明为必填”。
立即学习“前端免费学习笔记（深入）”；
-
<input required>→ 匹配:required -
<input required value="abc">→ 仍匹配:required（属性没变） -
<input>→ 不匹配，哪怕 JS 动态加了required属性（注意：动态添加属性后，CSS 会响应，但某些旧浏览器需触发重绘） - 兼容性：IE10+ 支持，无需前缀
：结合 :valid/:invalid 做真实表单反馈
原生表单验证靠的是浏览器对 type、required、pattern、min/max 等属性的解析，配合 :valid 和 :invalid 才能反映当前值是否合规。
注意：:invalid 在用户**未交互前**可能已触发（如空 required 输入框默认 invalid），可用 :user-invalid（Chrome 107+/Safari 16.4+）延迟样式应用，但兼容性有限，生产环境建议搭配 JS 的 checkValidity() 或监听 input/blur。
input:required:invalid {
background-color: #fff5f5;
}
input:required:valid {
background-color: #f0fff4;
}
/* 防止初始加载就标红，可加 class 控制 */
input:not(.touched):invalid {
background-color: transparent;
}
input.touched:invalid {
background-color: #fff5f5;
}：为什么不能只靠 CSS 做表单验证？
CSS 伪类无法捕获语义错误（如“密码两次输入不一致”）、异步校验（如用户名是否已被注册）、或自定义规则（如“手机号必须为 11 位且以 1 开头”）。这些必须由 JS 实现，并通过 setCustomValidity() 注入验证状态，才能让 :invalid 生效。
- 调用
input.setCustomValidity("用户名已存在")后，input:invalid才会匹配 - 清空校验需
input.setCustomValidity("")（空字符串表示 valid） -
:required和:optional无法被 JS 动态切换（属性存在即生效），但required属性本身可以用el.required = true/false控制 - 无障碍方面：
aria-invalid和aria-describedby必须由 JS 同步更新，CSS 无法提供语义信息
