如何套用連續類別中的 CSS 樣式

Question

當 .checked 類別存在時，我需要插入 text-decoration: line-through; 樣式到 .todo-name

#（我一直不懂是否可以用 css 來實現，但萬一我也可以用 js 作為最後的機會）

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

Codepen專案

最終結果應該是這樣的

Answer 1

您遇到了幾個問題。正如評論中提到的，如果您不想使用 JavaScript，則應該使用偽類。 :在本例中檢查了。

接下來，您將使用 CSS 選擇器 ~，它選擇該元素之後而不是先前的同級元素。因此，嘗試使用選擇器 #0:checked ~ .todo-name 選擇 .todo-name 將無法運作，因為名稱出現在複選框之前。

下面是一個工作版本的範例。

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

    
    Todo



    
    Todo