label本身不响应:hover或:focus，真正可交互的是其包裹的input、图标等子元素；需通过label:hover（非pointer-events:none）、input:focus、:checked+label或:focus-within实现状态控制。
label 本身不响应 :hover 或 :focus，真正可交互的是它包裹的 input、内部图标，或显式加了 tabindex 的子元素。
label 内部哪些元素能用 :hover 和 :focus
浏览器只对「可交互元素」默认监听悬停和焦点事件。label 是语义容器，不是可聚焦/可悬停的“控件”——除非你手动干预：
-
label:hover可生效，但前提是 label 没被设为pointer-events: none，且没被父级overflow: hidden截断事件区域 -
label input:focus总是可靠，因为input原生可聚焦；label:focus不会触发，除非你给label加了tabindex="0" - 如果 label 里有
svg或i图标，它们默认不可聚焦；加tabindex="0"后才能用:focus，但需同步处理键盘操作（如按空格触发切换） - 移动端点击 label 区域会自动聚焦关联的
input，所以label input:focus + .icon是比label:hover更稳定的状态钩子
用 :checked + label 实现图标状态切换
复选框或单选按钮的视觉状态，必须依赖 :checked 伪类，而 label 是最自然的控制载体。关键不是“让 label 变色”，而是“让 label 下的图标响应选中状态”：
- 嵌套写法更可靠：
<label><input type="checkbox"><span class="icon"></span>同意</label>，然后用label input:checked ~ .icon控制图标样式 - 避免用
display: none隐藏input—— 屏幕阅读器会跳过；改用position: absolute; clip: rect(0 0 0 0); -
:checked不支持 transition 动画，但可以用transform或opacity搭配transition在图标上做渐变效果 - 如果 label 包含多个可点击区域（比如文字+图标），确保整个 label 有足够热区（至少 44×44px），否则移动端点不准
label:focus 为什么几乎没人用
因为 label 默认不可聚焦，用户无法通过 Tab 键到达它——除非你主动加 tabindex="0"。但这会破坏预期行为：
立即学习“前端免费学习笔记（深入）”；
- 加了
tabindex后，label:focus能触发，但焦点落在 label 上，不代表关联的input获焦，用户仍需再按一次 Tab 才能输入 - 屏幕阅读器不会把
label当作表单控件朗读，它只是描述性文本；真正的焦点反馈应落在input:focus上 - 想实现“label 区域高亮 → input 获焦”的联动，应该用
:focus-within：写label:focus-within { background: #f0f8ff; }，只要内部任意可聚焦子元素获焦，label 就响应 -
:focus-within兼容性良好（Chrome 60+、Firefox 61+、Safari 15.4+），比硬塞tabindex到 label 更合理
真正容易被忽略的点是：label 的作用不是“自己变成按钮”，而是“让其他元素更容易被点中、被聚焦、被读取”。所有伪类搭配，最终都要回归到这个目的——别为了动效强行给 label 加交互逻辑，优先保证 input:focus 和 input:checked 的样式链完整、可预测、无障碍友好。
