国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Cara menggunakan gaya CSS dalam kelas sambungan
P粉447785031
P粉447785031 2024-04-02 22:44:36
0
1
589

bila .checked 類存在時(shí),我需要插入 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粉447785031
P粉447785031

membalas semua(1)
P粉545682500

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


Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan