:has()选择器可实现复选框勾选时高亮整个卡片，但要求复选框必须位于卡片内部且层级可达，不支持跨shadow DOM或脱离文档流；需确保浏览器版本兼容（Safari 15.4+、Chrome 105+、Firefox 121+）。
复选框勾选时高亮整个卡片的正确写法
直接用 :has(input[type="checkbox"]:checked) 是可行的，但必须确保复选框在卡片内部且层级可达。CSS 的 :has() 不支持跨 shadow DOM 或脱离文档流的元素，也不支持选择父级以外的祖先（比如祖父级需显式写出路径）。最简可靠结构是复选框作为卡片子元素或孙元素，且卡片是它的最近块级容器。
常见错误是把复选框放在卡片外、用 JavaScript 动态插入后忘记触发样式重计算，或者误以为 :has() 能匹配任意上级——它只认 CSS 选择器能到达的祖先链。
- ✅ 正确结构：
<article class="card"> <input type="checkbox" name="item"> <h3>标题</h3> <p>内容</p> </article>
- ❌ 错误结构：复选框在
<article>外，或被display: contents破坏盒模型 - ⚠️ 注意：Safari 15.4+、Chrome 105+、Firefox 121+ 支持；旧版 Edge（
:has() 中 input 选择器的写法细节
不能只写 :has(:checked)——这会匹配任意已勾选的表单控件，包括 radio 或其他 checkbox，造成误高亮。必须限定类型和作用域。
推荐写法是 .card:has(input[type="checkbox"][name="item"]:checked)，其中 name 或 id 属性用于精准绑定，避免多个复选框互相干扰。
立即学习“前端免费学习笔记（深入）”；
- 用
[name="xxx"]比用:nth-child(1)更健壮，防止 DOM 顺序变动失效 - 不要省略
type="checkbox"，否则:checked可能意外匹配到<option selected> - 如果卡片内有多个 checkbox，又只想响应某一个，必须加属性限定，不能依赖位置
配合 transition 实现平滑高亮效果
:has() 触发的是状态切换，本身不带动画，但你可以对卡片的背景、边框、阴影等属性加 transition。注意：不是所有属性都支持过渡，比如 display 不行，但 background-color、box-shadow、transform 都可以。
示例 CSS：
.card {
padding: 1rem;
border-radius: 6px;
transition: background-color 0.2s, box-shadow 0.2s;
}
.card:has(input[type="checkbox"]:checked) {
background-color: #f0f8ff;
box-shadow: 0 0 8px rgba(66, 153, 225, 0.3);
}
- 过渡时间建议 ≤ 0.25s，过长会显得卡顿；过短（如 0.05s）人眼难感知
- 慎用
opacity过渡——复选框本身可能被遮挡，导致点击区域变小 - 如果卡片含图片或字体图标，可同步加
filter: brightness(1.05)增强视觉反馈
兼容性 fallback 和调试技巧
当目标环境不支持 :has()（比如部分微信内置浏览器、旧版 iOS WebView），纯 CSS 方案会完全失效。此时不能指望“悄悄降级”，而应主动检测并启用 JS 补充逻辑。
调试时优先检查控制台是否报 Ignoring invalid CSS selector——这是浏览器忽略不支持伪类的提示，意味着 :has() 根本没生效。
- 用
document.querySelector(".card:has(input:checked)")在控制台手动测试是否能选中，快速验证支持性 - fallback 方案：给 checkbox 绑定
change事件，用 JS 切换卡片的data-checked属性，再用.card[data-checked]写备用样式 - 不要试图用
@supports selector(:has(...))包裹整段规则——部分浏览器虽支持:has()却不支持该@supports语法
真正麻烦的不是写法，而是复选框的 indeterminate 状态——:has() 无法区分 :checked 和 :indeterminate，如果业务需要三态反馈，必须用 JS 控制 class。
