本文详解如何利用现代 CSS :has() 伪类，精准实现“勾选复选框后降低对应任务内容透明度”的交互效果，并修复因选择器层级错误导致的样式失效问题。
本文详解如何利用现代 css `:has()` 伪类，精准实现“勾选复选框后降低对应任务内容透明度”的交互效果，并修复因选择器层级错误导致的样式失效问题。
在 React + Bootstrap 的任务列表组件中，你希望用户勾选复选框后，自动将该任务的标题、描述等主体内容（.task-body）透明度降至 0.5，以视觉上标识为已完成状态。当前 CSS 中使用了 .custom-checkbox input:checked ~ .task-body，但该写法无法生效——因为 .task-body 并非位于 <input> 元素之后的兄弟节点，而是嵌套在 <label> 外层的 .task 容器内，与 <input> 不处于同一 DOM 层级，因此 ~（后续兄弟选择器）完全不匹配。
✅ 正确解法是：使用 :has() 伪类向上定位父容器，再向下关联目标元素。
将原 CSS 中最后一行：
.custom-checkbox input:checked ~ .task-body {
opacity: 0.5;
}替换为：
.custom-checkbox:has(input:checked) ~ .task-body {
opacity: 0.5;
}⚠️ 注意：~ 仍需保留，因为 .task-body 是 .custom-checkbox 同级的后续兄弟元素（二者均位于 .task 内部），而非其子元素。查看你的 JSX 结构：
<div className="col-md-8 d-flex column align-items-center task">
<label class="custom-checkbox"> {/* 包含 input */}
<input type="checkbox" />
<span class="checkmark"></span>
</label>
<div className="card-body task-body"> {/* 目标元素，在 label 后面 */}
<h5 className="card-title">Task #1</h5>
...
</div>
</div>✅ 因此，.custom-checkbox:has(input:checked) ~ .task-body 准确表达了：“当 .custom-checkbox 元素内部存在已勾选的 input 时，查找它后面同级的 .task-body 元素并应用样式”。
立即学习“前端免费学习笔记（深入）”；
? 补充建议（提升健壮性）：
- 添加过渡动画，使透明度变化更平滑：
.task-body { opacity: 1; transition: opacity 0.2s ease-in-out; } - 确保浏览器兼容性：:has() 在 Chrome 105+、Firefox 117+、Safari 15.4+ 已支持；若需兼容旧版 Safari，可改用 React 状态控制（如 useState + className 切换）。
- 避免全局影响：.task-body 类名应确保唯一作用于单个任务项，防止多个任务相互干扰。
✅ 最终验证：勾选复选框后，.task-body 内容将平滑淡出至半透明，视觉反馈清晰，符合 iOS 提醒类 App 的完成态设计规范。
