带有复选框的列表改变选中文本的样式

Question

问题就在这里。我要一张单子。它必须是一个列表，而不是一个有标签和输入的表单，当它被选中时，文本应该被交叉。

下面是我所拥有的，但是如果选中的话，行透的CSS不起作用:

li input:checked  {
  text-decoration: line-through;
}

<ul>
  <li>
    <label for="todo"></label>
    <input type="checkbox" name="list" id="todo">Setup todo List
  </li>
</ul>

Answer 1

应将文本置于标签内，并将标签置于输入后。

li > input:checked + label {
  text-decoration: line-through;
}

<ul>
  <li>
    <input type="checkbox" name="list" id="todo">
    <label for="todo">Setup todo List</label>
  </li>
</ul>