如何仅用纯CSS实现复选框选中时修改对应span文字颜色

方案1：不修改现有HTML结构（推荐，现代浏览器兼容） #

直接使用CSS :has() 选择器匹配包含已勾选复选框的待办项容器，再选中文字节点设置样式即可，在你现有CSS基础上添加以下代码：

.todo-item:has(input[type=checkbox]:checked) span {
  color: green;
}

另外你现有CSS中存在一个小问题可顺便修正：.todo-item 里的 justify-items: space-between 是Grid布局属性，Flex布局下要改为 justify-content: space-between 才能实现左右内容两端对齐的效果。

方案2：兼容老旧浏览器（需调整HTML结构） #

如果需要兼容不支持:has()的旧版本浏览器，可以把隐藏的复选框移到文字节点前面，利用CSS后续兄弟选择器匹配选中状态：
修改后的HTML代码：

<div class="todo-item">
  <input type="checkbox" id="todo1">
  <label for="todo1">如果复选框被选中，这段文字的颜色需要变为绿色。</label>
  <div>
    <div>
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="white">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" />
      </svg>
    </div>
  </div>
</div>

对应新增的CSS代码：

.todo-item input[type=checkbox] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.todo-item input[type=checkbox]:checked + label {
  color: green;
}

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