勾选复选框后任务元素透明度不生效的问题排查

我正在开发一款类似iPhone提醒事项的Web应用，希望实现将标记为已完成的任务透明度降低的功能。勾选复选框后，.task-body的opacity无法变为0.5，多次尝试创建新类包裹元素仍未解决。

当前React代码 #

import "bootstrap/dist/css/bootstrap.css";
import "./TaskList.css"

function TaskList() {
  return (
    <div className="card rounded-0">
      <div className="row g-0">
        <div className="col-md-8 d-flex column align-items-center task">
          <label class="custom-checkbox">
            <input type="checkbox"></input>
            <span class="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>
        </div>
      </div>
    </div>
  );
}

export default TaskList;

当前CSS代码 #

input[type="checkbox"]{
  opacity: 0;
}

.custom-checkbox {
  width: 40px;
  height: 27px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.custom-checkbox .checkmark:hover{
  background-color: whitesmoke;
}

.custom-checkbox .checkmark{
  width: 100%;
  height: 100%;
  border: 2px solid black;
  border-radius: 3px;
  background: white;
}

.custom-checkbox input:checked + .checkmark{
  background: url(check2.svg) center/100%;
}

.task{
  border-bottom: 1px solid black;
  width: 100%;
}

.task-body{
  opacity: 1;
}

.custom-checkbox input:checked ~ .task-body{
  opacity: 0.5;
}

问题原因 #

核心问题是CSS选择器的层级关系错误：
你写的.custom-checkbox input:checked ~ .task-body选择器，试图选中checkbox的兄弟元素.task-body，但实际上.task-body是.custom-checkbox的同级元素，并非checkbox的同级元素，所以这个选择器无法匹配到目标元素，样式自然不会生效。

解决办法 #

方案1：使用CSS :has选择器（纯CSS方案） #

利用父容器的关系，通过:has选择器检测.custom-checkbox内部的checkbox是否被勾选，然后控制同级的.task-body样式：

/* 保留原有样式，替换最后一行选择器 */
.custom-checkbox input:checked ~ .checkmark{
  background: url(check2.svg) center/100%;
}

.task:has(.custom-checkbox input:checked) .task-body {
  opacity: 0.5;
}

注意：:has选择器在旧版浏览器（如IE）不支持，现代浏览器（Chrome 105+、Firefox 121+）已支持。

方案2：React状态控制类名（推荐，更可靠） #

这是符合React数据驱动视图的标准做法，通过状态变量控制.task-body的类名：

1. 修改React代码，添加状态管理：

import "bootstrap/dist/css/bootstrap.css";
import "./TaskList.css";
import { useState } from "react";

function TaskList() {
  const [isCompleted, setIsCompleted] = useState(false);

  return (
    <div className="card rounded-0">
      <div className="row g-0">
        <div className="col-md-8 d-flex column align-items-center task">
          <label className="custom-checkbox">
            <input 
              type="checkbox" 
              checked={isCompleted}
              onChange={(e) => setIsCompleted(e.target.checked)}
            />
            <span className="checkmark"></span>
          </label>
          {/* 根据状态添加completed类 */}
          <div className={`card-body task-body ${isCompleted ? 'completed' : ''}`}>
            <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>
        </div>
      </div>
    </div>
  );
}

export default TaskList;

2. 在CSS中添加completed类样式：

/* 保留原有样式，新增以下内容 */
.task-body.completed {
  opacity: 0.5;
}

这种方式兼容性更好，也更便于后续扩展任务的其他状态逻辑。

内容的提问来源于stack exchange，提问作者Albert Mkhitaryan