纯CSS可实现语义化响应式任务卡片：用div.task-card包裹标题、描述、截止时间与状态标签，flex布局+伪类交互，checkbox控制完成态，border-left标识优先级，hover显操作按钮，深色模式需@media重定义颜色与阴影。
用纯 CSS 实现响应式任务卡片，不需要框架
直接用 div + 原生 CSS 就能做出清晰、可点击、带状态标记的任务卡片，关键在结构语义化和伪类控制交互。避免套用 Bootstrap 或 Tailwind 的预设类，否则一改配色或间距就满屏找覆盖样式。
推荐结构：div.task-card 包裹 h3.task-title、p.task-desc、time.task-due 和 label.task-status。用 display: flex 布局标题区，右侧放状态标签，比浮动或绝对定位更稳定。
- 状态标签用
span而非div，避免意外换行或块级干扰 - 截止时间用
<time datetime="2024-06-15">6月15日</time>，既利于无障碍访问，也方便后续用 JS 比较日期 - 卡片 hover 时加
transform: translateY(-2px)比单纯阴影更轻量，不触发重排
给任务卡片加「完成/未完成」视觉反馈
别只靠文字标“已完成”，用户扫一眼要立刻分辨状态。最简方案是用 checkbox 隐藏 + :checked 控制样式，比 JS 切 class 更可靠（刷新不丢状态）。
把 <input type="checkbox" id="task-1"> 放在卡片最前面，用 label[for="task-1"] 包裹整个卡片内容，点击任意区域都可切换。然后用：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
input[type="checkbox"]:checked + label .task-title { text-decoration: line-through; opacity: 0.7; }
input[type="checkbox"]:checked + label .task-status::before { content: "✓ "; }
- 务必用
+（相邻兄弟选择器），不是~，否则多个卡片会互相影响 - 不要用
visibility: hidden隐藏 checkbox，它仍占布局空间；改用position: absolute; opacity: 0; - 移动端点按区域小，给
label加padding: 12px提升触控面积
让卡片支持优先级颜色和悬停操作按钮
优先级不靠文字大小区分，用左边界条（border-left）+ 背景色微调更省性能。操作按钮（如删除、编辑）默认隐藏，hover 卡片时才浮现，避免视觉噪音。
示例写法：
.task-card.high { border-left: 4px solid #e74c3c; background-color: #fdf2f2; }
.task-card:hover .task-actions { opacity: 1; transform: translateX(0); }
.task-actions { opacity: 0; transform: translateX(10px); transition: all 0.2s ease; }
- 优先级类名直接加在
task-card上，比如class="task-card high"，别用 data 属性再 JS 读取——增加复杂度且 SSR 不友好 - 操作按钮用
position: absolute; right: 8px; top: 8px;，配合z-index: 1确保盖住内容 - 别给
.task-actions设display: none，它会导致 transition 失效；用opacity+transform控制显隐
适配深色模式时的避坑点
CSS 变量本身不解决深色模式适配，必须配合 @media (prefers-color-scheme: dark) 覆盖关键色值，否则卡片在深色下文字看不清、状态标签发灰。
- 别只改背景色，正文文字、边框、图标、悬停阴影全要重定义，例如：
color: var(--text-primary, #333);在 dark 下应设为#e0e0e0 - 左边界条颜色不能直接用
hsl(0, 70%, 60%)这类亮色，深色模式下会过曝；改用hsl(0, 90%, 40%)保证对比度 - 检查
box-shadow：深色模式下rgba(0,0,0,0.1)几乎看不见，得改成rgba(255,255,255,0.08)
真正麻烦的是状态标签里的 ✓ 图标——SVG 内联时 fill 颜色不会随主题变，要么用 currentColor，要么干脆用 Unicode 字符 ✓ 配合 color 继承。
