:checked + label 只能改 label 背景而不能覆盖整行，因 label 默认 inline 且 css 无父选择器；可通过 absolute 定位使 label 视觉铺满容器，但须确保 input 可点击、可聚焦、可被读屏识别。

为什么 :checked + label 只能改 label 背景，不能覆盖整行

因为 label 默认是 inline 元素，宽度由内容撑开；即使设了 display: block，它也只占父容器的可用宽度，不会自动延伸到同级 input 所在的左侧空间。更关键的是，CSS 没有父选择器，input:checked 无法反向影响其父容器（如 .todo-section）或前面的兄弟元素。

如何让背景色“看起来”覆盖整行：用定位强行铺满

核心不是真去选父元素，而是让 label 在视觉上盖住整行 —— 通过脱离文档流 + 精确占位实现。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 给外层容器（如 .todo-section）加 position: relative，作为定位上下文
• 把 input[type="checkbox"] 和 label 都设为 position: absolute
• input 定位到左上角（比如 top: 0; left: 0），保留可点击区域
• label 设 top: 0; left: 0; right: 0; bottom: 0，并加 z-index: 1，确保它铺满整个容器且在 input 上层
• 用 input:checked + label 控制 label 的 background-color，此时背景就自然填满整行了

:checked + label 的 HTML 结构必须严格满足什么条件

这个组合选择器生效的前提非常具体，错一个就失效：

• input 和 label 必须是**同级、相邻**的兄弟元素，中间不能插入任何其他标签（包括空格、换行符在某些解析模式下也可能破坏匹配）
• label 必须紧跟在 input 后面，顺序不能颠倒
• label 不需要 for 属性也能触发样式，但为了可访问性（键盘焦点、屏幕阅读器），仍建议保留 for="xxx" 并与 input 的 id 对应
• 如果用了 display: none 隐藏 input，它仍需保留在 DOM 中且位置不变，否则 + 关系断裂

容易被忽略的可访问性陷阱

用绝对定位把 label 铺满后，视觉上没问题，但可能破坏交互逻辑：

• 如果 label 的 z-index 过高，会挡住 input，导致无法点击复选框 —— 必须确保 input 的 z-index 高于 label，或给 label 加 pointer-events: none（再给内部文字加 pointer-events: auto）
• 聚焦时，浏览器默认会给 input 加 outline，但若它被 label 盖住，outline 就看不见了 —— 建议用 input:focus-visible + label 单独控制焦点样式
• 屏幕阅读器依赖 label 与 input 的语义关联，不能仅靠视觉覆盖替代 for 或包裹结构

真正难的不是让背景“看起来”铺满，而是铺满之后，复选框还能点、能聚焦、能被读屏软件识别 —— 这三者缺一不可。很多方案只解决了视觉，却在无障碍上悄悄掉链子。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！