Comment appliquer les styles CSS dans les classes de continuation

Question

quand .checked 类存在时，我需要插入 text-decoration: line-through; 样式到 .todo-name

(Je n'ai jamais compris si cela pouvait être fait avec du CSS, mais au cas où je pourrais aussi utiliser js en dernière chance)

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

Projet Codepen

Le résultat final devrait être comme ça

Answer 1

Vous avez rencontré plusieurs problèmes. Comme mentionné dans les commentaires, si vous ne souhaitez pas utiliser JavaScript, vous devez utiliser des pseudo-classes. :在本例中检查了.

Ensuite, vous utiliserez des sélecteurs CSS ~，它选择该元素之后而不是之前的同级元素。因此，尝试使用选择器 #0:checked ~ .todo-name 选择 .todo-name qui ne fonctionneront pas car le nom apparaît avant la case à cocher.

Vous trouverez ci-dessous un exemple de version fonctionnelle.

input:checked ~ .todo-name {
    text-decoration: line-through;  
}

    
    Todo



    
    Todo