.checked クラスが存在する場合、text-decoration: line-through; スタイルを .todo-name## に挿入する必要があります。
.checked
text-decoration: line-through;
.todo-name
リーリー
いくつかの問題が発生しました。コメントで述べたように、JavaScript を使用したくない場合は、疑似クラスを使用する必要があります。 : この例では がチェックされています。
: この例では
次に、CSS セレクター ~ を使用します。これは、この要素の前ではなく後の兄弟要素を選択します。したがって、セレクター #0:checked ~ .todo-name を使用して .todo-name を選択しようとしても、名前がチェックボックスの前に表示されるため、機能しません。
~
#0:checked ~ .todo-name
以下は、実際に動作するバージョンの例です。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
いくつかの問題が発生しました。コメントで述べたように、JavaScript を使用したくない場合は、疑似クラスを使用する必要があります。
: この例ではがチェックされています。次に、CSS セレクター
~を使用します。これは、この要素の前ではなく後の兄弟要素を選択します。したがって、セレクター#0:checked ~ .todo-nameを使用して.todo-nameを選択しようとしても、名前がチェックボックスの前に表示されるため、機能しません。以下は、実際に動作するバージョンの例です。