不能直接用.form-check-input:checked + .form-check-label做卡片高亮，因该选择器仅作用于label，无法影响外层.card容器的边框、阴影和z-index；必须用.card:has(.form-check-input:checked)控制整卡样式，并注意overflow:hidden裁剪问题。
为什么不能直接用 .form-check-input:checked + .form-check-label 做卡片高亮
Bootstrap 5 的多选框（input[type="checkbox"]）默认是隐藏的，靠 .form-check-input + .form-check-label 组合实现点击区域。但仅靠 :checked + .form-check-label 改背景色或边框，无法撑开整个卡片容器、无法同步阴影和层级——视觉上还是“一个标签被点了一下”，不是“一张卡片被选中了”。
必须包裹一层卡片容器并控制其状态样式
真正生效的路径是：把每组 .form-check 包进一个带 .card 类的容器里，再用 :has() 伪类监听内部 checkbox 状态（注意兼容性）。目前 Chrome 105+、Firefox 103+、Safari 15.4+ 支持，Edge 同 Chrome。
-
.card容器需加position: relative和cursor: pointer，保证点击反馈明确 - 选中态样式写在
.card:has(.form-check-input:checked)上，而非.form-check-label - 必须显式覆盖
box-shadow和border-color，否则默认阴影/边框不会变 - 别漏掉
z-index: 1，否则多个卡片堆叠时，选中态可能被相邻卡片遮住
.card {
transition: all 0.2s ease;
}
.card:has(.form-check-input:checked) {
border-color: #0d6efd;
box-shadow: 0 0 0 3px rgba(13, 110, 237, 0.25);
z-index: 1;
}
IE 和旧版 Safari 下 fallback 方案只能靠 JS 切换类
:has() 在 IE 全系、iOS Safari ≤15.3、Android WebView ≤103 中不可用。此时必须放弃纯 CSS 路径，改用轻量 JS 监听 change 事件，给父 .card 添加 is-selected 类。
- 不要用
querySelectorAll('.form-check-input')每次都查——先缓存所有 input，绑定一次事件监听即可 - 避免在快速连点时状态残留：用
el.closest('.card')精准定位父容器，不依赖 DOM 层级硬编码 - 如果卡片内含
disabled多选框，记得跳过它：if (el.disabled) return
document.querySelectorAll('.form-check-input').forEach(el => {
el.addEventListener('change', () => {
const card = el.closest('.card');
if (!card) return;
card.classList.toggle('is-selected', el.checked);
});
});
卡片内文本/图标选中态不一致？检查 user-select 和 pointer-events
当卡片里有可交互元素（如按钮、链接）或文字被意外禁选时，用户会感觉“点了没反应”。这不是样式问题，而是行为拦截。
立即学习“前端免费学习笔记（深入）”；
- 确保
.card没设user-select: none——否则点击文字区域不会触发 checkbox change - 避免对
.form-check-label设置pointer-events: none，这会让 label 失去点击穿透能力 - 若卡片含
contenteditable="true"或tabindex，要额外处理 focus 状态，否则键盘用户无法用空格切换
overflow: hidden。一旦父级 wrapper 或 .row 加了这个，选中态的阴影和边框加粗就会被裁掉——看起来像“没生效”，其实是被剪掉了。 
