label本身无:valid伪类，需通过结构关系（如label包裹input或for/id关联）配合input:valid ~ label等兄弟选择器间接控制样式。
label 怎么响应 input 的 :valid 状态？
label 本身没有 :valid 伪类，它不能直接响应验证状态；必须通过与 input 的结构关系（如包裹或 for/id 关联）配合相邻/后代选择器间接控制。浏览器不会给 label 自动添加 :valid/:invalid，这点常被误认为“label 支持验证伪类”。
用 + 或 ~ 选择器联动 label 和 input
当 label 和 input 是兄弟元素（同级、label 在 input 前），可用 + 选择器；若顺序不固定或中间有其他元素，改用 ~（通用兄弟选择器）更稳妥。
-
input:valid + label：仅当label紧跟在input后时生效（少见） -
input:valid ~ label：推荐，只要label在同一父容器内且位于input之后即可匹配 -
label > input:valid：仅适用于label包裹input的写法（语义好，但限制 DOM 结构）
示例（推荐结构）：
<form> <input type="email" id="email" required> <label for="email">邮箱</label> </form>
CSS：
立即学习“前端免费学习笔记（深入）”；
input:valid ~ label {
color: #28a745;
}
input:invalid:not(:placeholder-shown) ~ label {
color: #dc3545;
}
为什么不能只靠 :required 或 :invalid 给 label 加星号？
加必填星号是静态语义，应独立于验证状态——用户还没输，label 就该提示“必填”；而 :invalid 是动态验证结果，初始为空时也会触发，导致一进页面就红标，体验差。
- 用
label[for][required]或label.required配合::after显式加*，和验证逻辑解耦 -
input:invalid:not(:placeholder-shown)才是真正“输错后”的错误态，避免 placeholder 还在时误标 - 屏幕阅读器依赖
aria-required="true"，仅靠 CSS 无法传递可访问性语义
:valid/:invalid 触发时机容易被忽略的点
这两个伪类不是“实时监听”，而是依赖浏览器是否已对字段执行过验证检查。用户未交互前，空的 required 字段默认为 :invalid，但很多设计希望延迟到提交或失焦后才反馈。
- 首次加载页面，
input:invalid会立即匹配空的必填项 → 必须加:not(:placeholder-shown)过滤 - 用户输入又删空，
:invalid会再次激活 → 若需区分“未填”和“填错”，得结合 JS 调用checkValidity()和自定义setCustomValidity() - 某些移动端浏览器对
:valid的更新有延迟，尤其在软键盘收起后，建议搭配blur事件做兜底样式同步
复杂表单里，label 的视觉反馈要和 input 的验证状态、用户操作阶段、无障碍需求三者对齐，光靠一个伪类远远不够。
