Rumah > Soal Jawab > teks badan
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
P粉5456825002024-04-03 16:26:03
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-name
yang tidak akan berfungsi kerana nama muncul sebelum kotak pilihan.
Di bawah ialah contoh versi yang berfungsi.
input:checked ~ .todo-name { text-decoration: line-through; }