扫码关注官方订阅号
当 .checked 类存在时,我需要插入 text-decoration: line-through; 样式到 .todo-name
.checked
text-decoration: line-through;
.todo-name
(我一直不明白是否可以用 css 来实现,但万一我也可以使用 js 作为最后的机会)
Todo Todo
Codepen项目
最终结果应该是这样的
您遇到了几个问题。正如评论中提到的,如果您不想使用 JavaScript,则应该使用伪类。 :在本例中检查了。
:在本例中检查了
接下来,您将使用 CSS 选择器 ~,它选择该元素之后而不是之前的同级元素。因此,尝试使用选择器 #0:checked ~ .todo-name 选择 .todo-name 将不起作用,因为名称出现在复选框之前。
~
#0:checked ~ .todo-name
下面是一个工作版本的示例。
input:checked ~ .todo-name { text-decoration: line-through; }
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
您遇到了几个问题。正如评论中提到的,如果您不想使用 JavaScript,则应该使用伪类。
:在本例中检查了。接下来,您将使用 CSS 选择器
~,它选择该元素之后而不是之前的同级元素。因此,尝试使用选择器#0:checked ~ .todo-name选择.todo-name将不起作用,因为名称出现在复选框之前。下面是一个工作版本的示例。
input:checked ~ .todo-name { text-decoration: line-through; }