:checked 本身不画删除线，需通过 +、~ 或 > 选择器作用于兄弟或子元素的 label；因 input 是替换元素，text-decoration 必须加在 label 上；需确保 dom 结构紧密、for/id 匹配，并处理移动端点击区域与浏览器兼容性问题。
怎么用 :checked 触发待办项的删除线
核心就一条：把 <input type="checkbox"> 和待办文字放在同一个父容器里，用相邻或子元素选择器联动。不能指望 checkbox 自己“画线”，得靠它选中后改变兄弟或后代元素的样式。
常见错误是把 checkbox 和文字分开在不同 div 里，或者用了 label 但没加 for 或没包住文字，导致点击无效、伪类不触发。
- 必须让
input[type="checkbox"]和目标文字在 DOM 中可被 CSS 选择器关联（推荐结构：input+label或input包裹label） -
:checked只作用于当前选中的 checkbox 元素本身，要影响其他元素得用+（下一个兄弟）、~（后续所有兄弟）或>（子元素，仅当input是父容器时） - 别用
:checked::after想直接在线上加效果——伪元素挂载在 checkbox 上，不是文字上，没法跨元素加删除线
为什么 text-decoration: line-through 要加在 label 上而不是 input
因为 input 是替换元素，不渲染文本内容，text-decoration 对它无效。真正显示文字的是 label 或普通 span，样式必须落在它身上。
典型结构示例：
<div class="todo-item"> <input type="checkbox" id="todo-1"><label for="todo-1">买牛奶</label> </div>
对应 CSS：
#todo-1:checked + label {
text-decoration: line-through;
color: #999;
}
- 如果
label里还有图标或按钮，line-through会贯穿整个行高，可能穿到图标上——这时改用opacity: 0.6或单独给文字包span更可控 - 某些旧版 Safari 对
label上的line-through渲染偏细或位置飘移，加text-decoration-thickness: 2px和text-decoration-offset: 2px可微调
移动端点击区域太小导致 :checked 不易触发
原生 checkbox 默认尺寸极小，尤其在手机上几乎点不中。不加处理的话，用户以为功能坏了，其实是根本没点上。
- 必须隐藏原生 checkbox（
appearance: none或opacity: 0），再用label::before画个大勾选框 - 确保
label的for属性值和 checkbox 的id完全一致，大小写、空格都不能错 - 不要只依赖
click事件去模拟状态——CSS 的:checked是真实状态，JS 操作也要同步input.checked = true，否则样式断连
用 JS 切换状态时为什么样式没变
因为直接改 input.checked 属性不会触发浏览器的“表单控件交互”逻辑，部分浏览器（特别是 iOS Safari）下 :checked 伪类可能不重绘。
- 正确做法是调用
input.click()，而不是赋值input.checked = true - 如果必须用属性赋值，之后手动触发一次
input.dispatchEvent(new Event('change', { bubbles: true })) - React/Vue 等框架里，别用
ref强制改 DOM 属性，走响应式数据驱动；否则容易出现“JS 认为已选中，CSS 还没更新”的撕裂感
:checked + label 就彻底失效——检查结构比调样式花的时间多得多。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
