label本身无:focus状态，需通过input:focus+label兄弟选择器联动变色，或用javascript监听focus/blur动态增删label类名实现，禁用tabindex避免语义破坏。
label 标签本身没有 :focus 状态 —— 它不会自动获得焦点，也不能直接响应 :focus 伪类。想让 label 颜色随关联输入框的焦点变化，必须借助 CSS 的兄弟选择器或 JavaScript。
label 无法直接用 :focus 改变颜色
浏览器不把 label 视为可聚焦元素（除非加了 tabindex，但这违背语义且不推荐）。你写 label:focus { color: red; } 永远不会生效。
常见错误现象：样式写了但完全没反应；检查元素发现 label 上根本没有 :focus 类或状态标记。
- 显式关联的
label[for="xxx"]和对应input#xxx是两个独立节点，CSS 无法“反向”从 input 影响 label - 隐式关联（
label > input）也不行 ——label:hover input:focus可以，但input:focus + label或input:focus ~ label不成立，因为 label 在 input 外部且不是后续兄弟
用 + 或 ~ 选择器联动 label 和 input（仅限特定 HTML 结构）
只有当 label 紧跟在 input 后面（相邻兄弟），或位于同一父容器中且在 input 之后（普通兄弟），才能用 CSS 实现纯样式联动。
示例结构（可行）：
<div class="field"> <input id="email" type="email" required><label for="email">邮箱地址*</label> </div>
对应 CSS：
.field input:focus + label {
color: #007BFF;
}
.field input:valid + label {
color: #28A745;
}
- 必须确保
label紧接在input后面，否则+不匹配；用~可放宽为任意后续兄弟，但 label 仍需在 input 同级且在其后 -
:valid和:invalid依赖 input 的required、type等属性，对空值或格式错误有响应，但不等价于“已填写”（例如 email 输入 "a" 会触发:invalid） - 该方案不兼容 IE11 及更早版本（
:valid/:invalid支持度低）
用 JavaScript 监听 focus/blur 并切换 label 类名
这是最可靠、兼容性最好、语义最清晰的方式。核心是监听 input 的 focus 和 blur 事件，然后操作其关联的 label 元素。
实操建议：
- 优先使用显式关联（
label[for]），通过document.getElementById(label.for)找到目标 input，再反查 label —— 更健壮 - 或者直接遍历
label.control属性（现代浏览器支持），它指向被关联的表单控件 - 避免给所有 label 统一加 class，而是动态增删，比如
label.classList.add('focused')/.remove('focused')
简短示例：
document.querySelectorAll('input').forEach(input => {
const label = document.querySelector(`label[for="${input.id}"]`);
if (!label) return;
input.addEventListener('focus', () => label.classList.add('focused'));
input.addEventListener('blur', () => label.classList.remove('focused'));
});
CSS 配套：
label.focused { color: #007BFF; font-weight: 600; }
为什么不要用 tabindex 让 label 可聚焦
有人尝试给 label 加 tabindex="0" 再用 :focus，这会导致严重问题：
- 破坏表单导航流：键盘 Tab 会先停在 label 上，再停在 input 上，用户要按两次 Tab 才能进下一个字段
- 屏幕阅读器误读：label 被当作独立可交互元素，混淆语义（label 是描述，不是控件）
- 点击 label 时，焦点会落到 label 自身而非 input，失去默认行为
真正需要 label 响应焦点，本质是想表达“当前正在编辑这个字段”，这个语义属于 input，而不是 label —— 所以操作对象必须是 input，影响目标才是 label。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
