Html CSS允许元素在检查事件时消失但不重新出现

我试图让CSS影响复选框后的第二个元素。在我的示例中，我有一个字体可怕的符号，未选中时显示，选中时显示另一个。当前，图标隐藏，未选中的图标显示，但选中的图标不显示。请参阅下面的代码或

我尝试过使用相邻规则（+）和

input:checked+n+y

，使用contains规则（~）和

input:checked~n+y

，甚至第n个子变量，但都没有成功。在我看来，如果我能用CSS让元素消失，我应该能让它重新出现，我希望我没有因为一些简单的事情而把头发扯掉。我知道关于SO的其他问题，甚至尝试

input:checked+n+y{}

的解决方法似乎也没有帮助

另外，我担心Javascript替代方案对我没有帮助

.container{
}
.容器>标签{
显示：块；
光标：指针；
}
.container>标签>输入{
可见性：隐藏；
}
.容器>标签>跨度{
显示：内联块；
}
.容器>标签>输入+n{
颜色：#C77AA6；
}
.container>标签>输入：选中+n{
显示：无；
}
.容器>标签>输入+n+y{
显示：无；
}
.container>标签>输入：选中+n+y{
颜色：#C77AA6；
}

项目1
项目2
项目2a
项目3

选择器看起来不错，您可能只是错过了以下内容：

.container > label > input:checked + n + y {
    color: #C77AA6;
    display: inline-block; /*add this*/
}

旁注，

收音机

和

复选框

的功能不同，它们的外观不能相同。我通过对收音机图标使用

fa-circle-o

和

fa-dot-circle-o

修复了这个问题

.container{
}
.容器>标签{
显示：块；
光标：指针；
}
.container>标签>输入{
可见性：隐藏；
}
.容器>标签>跨度{
显示：内联块；
}
.容器>标签>输入+n{
颜色：#C77AA6；
}
.container>标签>输入：选中+n{
显示：无；
}
.容器>标签>输入+n+y{
显示：无；
}
.container>标签>输入：选中+n+y{
颜色：#C77AA6；
显示：内联块；
}

项目1
项目2
项目2a
项目3