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

如何套用連續(xù)類別中的 CSS 樣式
P粉447785031
P粉447785031 2024-04-02 22:44:36
0
1
588

當(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)該是這樣的

P粉447785031
P粉447785031

全部回覆(1)
P粉545682500

您遇到了幾個(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;  
}


最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板