cari

Rumah  >  Soal Jawab  >  teks badan

Cara menggunakan gaya CSS dalam kelas sambungan

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粉447785031P粉447785031268 hari yang lalu469

membalas semua(1)saya akan balas

  • P粉545682500

    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;  
    }
    
    
    

    balas
    0
  • Batalbalas