最轻量且语义清晰的方案是用+实现无JS卡片选中：input与label同级，label带for属性绑定id，CSS用input:checked + label控制样式，支持鼠标点击、空格键切换及屏幕阅读器。
HTML卡片怎么实现可选中效果
纯HTML本身不提供“卡片选中”这种交互状态，必须配合CSS的:checked伪类（需搭配<input type="checkbox">或<input type="radio">）或JavaScript手动管理selected/active类。直接给<div class="card">加<code>selected属性不会触发任何样式变化。
用checkbox + label实现无JS卡片选中
这是最轻量、语义清晰、支持键盘操作（空格键切换）的方案，适合多选场景：
<input type="checkbox" id="card-1" name="cards" value="1"> <label for="card-1" class="card"> <h3>用户卡片</h3> <p>张三，28岁</p> </label>
关键点：
立即学习“前端免费学习笔记（深入）”；
-
label必须带for属性，且值与input的id严格一致 -
input要放在label外（否则点击会重复触发），且不可设display: none——可用position: absolute; clip: rect(0 0 0 0);隐藏但保留可访问性 - CSS中用
input:checked + label { box-shadow: 0 0 0 2px blue; }控制选中样式 - 若需单选，把
type="checkbox"换成type="radio"，并确保所有radio的name相同
用tabindex + JavaScript模拟可聚焦选中
当卡片必须是纯<div>、不能改结构，或需要键盘方向键导航时，走这个路径：
<p>给卡片加<code>tabindex="0"使其可聚焦，再监听click和keydown（Enter/Space）：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
<div class="card" tabindex="0" data-id="1"> <h3>项目卡片</h3> <p>重构登录模块</p> </div>
JS逻辑要点：
- 用
classList.toggle('selected')而非add/remove，避免重复点击状态错乱 - 必须监听
keydown事件，捕获event.key === 'Enter'或' '（空格），并event.preventDefault()防止页面滚动 - 如果支持多选，按住
Ctrl（Windows）或Cmd（macOS）时点击应追加选择，需检查event.ctrlKey或event.metaKey - 别忘了用
aria-selected="true/false"同步更新，保障屏幕阅读器可用
常见踩坑：CSS选中样式不生效或行为异常
以下问题高频出现，直接对应排查：
-
label里嵌套了input（即<label><input>...</label>）→ 点击会触发两次change，且:checked + label失效；正确做法是input与label同级 - CSS用了
input:checked ~ label（波浪号）→ 要求label是input的**后续兄弟元素**，不是父级或子级；顺序写错就完全不匹配 - 卡片内有
button或a等可交互元素 → 点击它们会阻止label冒泡，导致选中失败；要么禁用这些元素的默认行为，要么用JS方案接管 - 移动端点击延迟或误触 → 给
label加cursor: pointer和-webkit-tap-highlight-color: transparent
真正麻烦的从来不是加个勾选框，而是让选中状态在各种交互路径下（鼠标、空格、回车、Ctrl+点击、触摸、读屏）都保持一致且可预测。
