bila .checked 类存在时，我需要插入 text-decoration: line-through; 样式到 .todo-name
(Saya tidak pernah faham jika ia boleh dilakukan dengan css, tetapi sekiranya saya juga boleh menggunakan js sebagai peluang terakhir)
<label class="checkbox-container" for="0"><span class="todo-name">Todo</span>
<input onclick="updateStatus(this)" type="checkbox" id="0" checked="">
<span class="checkmark checked"></span>
</label>
<!--This content does not have .checked and should not change-->
<label class="checkbox-container" for="0"><span class="todo-name">Todo</span>
<input onclick="updateStatus(this)" type="checkbox" id="0">
<span class="checkmark"></span>
</label>
<style>
/*.todo-name{text-decoration: line-through;}*/
/*Not working*/
/*
.checkbox-container .checked ~ .todo-name {
text-decoration: line-through;
}
.checkbox-container:not(.checked) .todo-name {text-decoration: line-through;}
*/
</style>
Projek Codepen
Hasil akhir sepatutnya seperti ini
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Anda telah menghadapi beberapa masalah. Seperti yang dinyatakan dalam ulasan, jika anda tidak mahu menggunakan JavaScript, anda harus menggunakan kelas pseudo.
:在本例中检查了.Seterusnya, anda akan menggunakan pemilih CSS
~，它选择该元素之后而不是之前的同级元素。因此，尝试使用选择器#0:checked ~ .todo-name选择.todo-nameyang tidak akan berfungsi kerana nama muncul sebelum kotak pilihan.Di bawah ialah contoh versi yang berfungsi.
input:checked ~ .todo-name { text-decoration: line-through; }