.checked
クラスが存在する場(chǎng)合、text-decoration: line-through;
スタイルを .todo-name
## に挿入する必要があります。
リーリー
コードペンプロジェクト最終結(jié)果は次のようになります
いくつかの問題が発生しました。コメントで述べたように、JavaScript を使用したくない場(chǎng)合は、疑似クラスを使用する必要があります。 : この例では
がチェックされています。
次に、CSS セレクター ~
を使用します。これは、この要素の前ではなく後の兄弟要素を選択します。したがって、セレクター #0:checked ~ .todo-name
を使用して .todo-name
を選択しようとしても、名前がチェックボックスの前に表示されるため、機(jī)能しません。
以下は、実際に動(dòng)作するバージョンの例です。