菜单使用瓷砖和子文件与纯CSS

我试着用纯CSS制作一个包含瓷砖和子瓷砖的菜单。 当单击一种颜色的一个瓷砖时，所有其他瓷砖将消失，并且仅显示该颜色的子瓷砖。 我面临的问题是，只有在该瓷砖消失后，div中的瓷砖才会消失。 瓷砖在瓷砖不在之前就在div中。 图片描述了这个实验。 检查代码片段。 提前谢谢 干杯 克里斯

#重置+标签{显示：块；}
标签{显示：无}
输入[type=“radio”]{display:none；}
div{display:none；}
输入[type=“radio”]：选中+标签~标签，
输入[type=“radio”]：选中+label~label~div{display:none；}
输入[type=“radio”]：选中+标签~div{display:block；}
输入[type=“radio”][id=“reset”]：选中~label{display:block；}
div{
过渡：所有1；
}
标签{
宽度：23%；
浮动：左；
文本对齐：居中；
背景：#ffffff；
盒影：0 1px 3px rgba（0,0,0,0.12），0 1px 2px rgba（0,0,0,0.24）；
颜色：#22222；
填充：0.5%；
利润率：0.5%；
边缘底部：30px；
光标：指针；
不透明度：1；
过渡：所有1；
}
.tile、.sub-tile{
宽度：23%；
高度：100px；
浮动：左；
过渡：所有1；
利润率：0.5%；
填充：0.5%；
}
.绿色，.顶绿色{
背景#66dd99；
}
.蓝色，.顶蓝色{
背景#6666ff；
}
.红色，.顶红色{
背景:#ff4466；
}
.紫色，.顶紫色{
背景：紫色；
}

重置
蓝色
1.
2.
3.
4.
5.
6.
红色
7.
8.
9
10
紫色
16
17
18
19
20
21
绿色
12
13
14
15

是的，您可以尝试通过以下简单的代码片段来实现这一点

编辑注释，您需要将#重置初始值设置为选中状态

#重置+标签{显示：块；}
标签{显示：无}
输入[type=“radio”]{显示：无}
div{display:none}
输入[type=“radio”]：选中+标签~标签，
输入[type=“radio”]：选中+label~label~div{display:none}
输入[type=“radio”]：选中+标签~div{
显示：块；
动画：淡入1s；
}
输入[type=“radio”][id=“reset”]：选中~label{display:block}
.red{color:red}
.blue{颜色：blue}
.橙色{颜色：橙色}
@关键帧淡入{
从{opacity:0；}
到{opacity:1}
}

重置
蓝色
1.
2.
3.
红色
1.
2.
3.
橙色
1.
2.
3

您需要选择前面的元素，CSS没有，因为它只遍历DOM一次。非常感谢！非常感谢你！伙计们，它工作得很好，但我现在不知道如何在动画消失时保持它。@djchrisclue你能发布一个更新的代码吗？我刚刚更新了代码。提前感谢您的支持help@djchrisclue我对我的回答作了一些补充。您还可以在此处查看修改后的代码：