本文详解如何利用现代 CSS 的 :has() 伪类，精准实现“勾选复选框后自动降低对应任务内容透明度”的交互效果，并修正因选择器层级错误导致的样式失效问题。
本文详解如何利用现代 css 的 `:has()` 伪类，精准实现“勾选复选框后自动降低对应任务内容透明度”的交互效果，并修正因选择器层级错误导致的样式失效问题。
在构建类似 iOS 提醒事项（Reminders）的应用时，一个关键的视觉反馈是：当用户勾选任务完成状态后，对应任务区域（如标题、描述等）应以降低透明度（例如 opacity: 0.5）的方式呈现完成态，增强可读性与状态感知。
你当前的 CSS 中使用了 .custom-checkbox input:checked ~ .task-body，但该写法无法生效——因为 .task-body 并非位于 <input> 元素之后的兄弟节点，而是嵌套在更外层的 .custom-checkbox 同级容器（即 .col-md-8）中；CSS 选择器无法向上查找祖先或跨层级定位，~（后续兄弟选择器）仅作用于同一父级下的后续兄弟元素，而 <input> 和 .task-body 并无此关系。
✅ 正确解法是使用 :has() 伪类（已获 Chrome 105+、Firefox 117+、Safari 15.4+ 原生支持），它允许基于子元素状态选择父容器：
/* ✅ 正确：当 .custom-checkbox 内部的 input 被勾选时，影响其后的 .task-body */
.custom-checkbox:has(input:checked) ~ .task-body {
opacity: 0.5;
}但注意：你的 HTML 结构中，.task-body 并非 .custom-checkbox 的后续兄弟元素，而是同属 .col-md-8 的子元素。因此，更健壮且语义清晰的写法是将状态控制逻辑上移到共同父容器（推荐做法）：
立即学习“前端免费学习笔记（深入）”；
/* 推荐：在 .col-md-8 上监听内部 checkbox 状态 */
.col-md-8:has(.custom-checkbox input:checked) .task-body {
opacity: 0.5;
}同时需确保 HTML 中复选框结构完整（注意 for 属性与 id 匹配，提升可访问性）：
// ✅ 优化后的 JSX 片段（关键修改）
<label className="custom-checkbox">
<input
type="checkbox"
id="task-1"
onChange={(e) => console.log('Task completed:', e.target.checked)}
/>
<span className="checkmark"></span>
</label>
<div className="card-body task-body">
<h5 className="card-title">Task #1</h5>
<p className="card-text">This is a standard task.</p>
<p className="card-text">
<small className="text-body-secondary">Due Date: </small>
</p>
</div>⚠️ 注意事项：
- :has() 是较新的 CSS 功能，请确认目标浏览器兼容性（caniuse.com/:has）；如需支持旧版浏览器（如 IE 或早期 Edge），须改用 JavaScript 控制 class 切换；
- 避免过度依赖 opacity 表达完成态——它会降低所有子元素（包括文字、图标）的可读性；更优方案是结合 filter: grayscale(50%) 或添加 .completed 类并统一管理样式；
- React 中若需持久化状态（如刷新后保留完成态），应配合 useState 管理 checkbox 的 checked 属性，而非仅依赖纯 CSS。
总结：CSS :has() 提供了声明式、无 JS 的状态联动能力，但必须严格匹配 DOM 层级关系。将选择器锚定在共同父容器（如 .col-md-8），再向下精准定位 .task-body，是解决此类“跨子元素状态响应”问题的最佳实践。
