當(dāng) .checked
類別存在時(shí),我需要插入 text-decoration: line-through;
樣式到 .todo-name
#(我一直不懂是否可以用 css 來實(shí)現(xiàn),但萬一我也可以用 js 作為最後的機(jī)會(huì))
<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專案
最終結(jié)果應(yīng)該是這樣的
您遇到了幾個(gè)問題。正如評(píng)論中提到的,如果您不想使用 JavaScript,則應(yīng)該使用偽類。 :在本例中檢查了
。
接下來,您將使用 CSS 選擇器 ~
,它選擇該元素之後而不是先前的同級(jí)元素。因此,嘗試使用選擇器 #0:checked ~ .todo-name
選擇 .todo-name
將無法運(yùn)作,因?yàn)槊Q出現(xiàn)在複選框之前。
下面是一個(gè)工作版本的範(fàn)例。
input:checked ~ .todo-name { text-decoration: line-through; }