84669 人が学習中
152542 人が学習中
20005 人が学習中
5487 人が学習中
7821 人が学習中
359900 人が学習中
3350 人が学習中
180660 人が学習中
48569 人が学習中
18603 人が学習中
40936 人が学習中
1549 人が学習中
1183 人が学習中
32909 人が学習中
.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
以下は、実際に動作するバージョンの例です。
いくつかの問題が発生しました。コメントで述べたように、JavaScript を使用したくない場合は、疑似クラスを使用する必要があります。
: この例では
がチェックされています。次に、CSS セレクター
~
を使用します。これは、この要素の前ではなく後の兄弟要素を選択します。したがって、セレクター#0:checked ~ .todo-name
を使用して.todo-name
を選択しようとしても、名前がチェックボックスの前に表示されるため、機能しません。以下は、実際に動作するバージョンの例です。