带复选框的列表会更改选中文本的样式

Question

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

以下是我所拥有的内容，但如果检查过线路的CSS不起作用：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您应该将文本放在标签内，并在输入后放置标签。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;