: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 只是“被声明为必填”。
