Html 当选中复选框时，如何折叠CSS网格行？

选中该复选框时，导航面板应显示，未选中则应隐藏。问题是我用CSS网格布局设置标题栏，所以我不知道如何使最下面一行消失

我只知道有一个复选框和单选按钮等的

：checked

伪选择器。。我只需要在选中该复选框时使第二行消失

@导入url（'https://fonts.googleapis.com/css?family=Rubik:900|拉吉达尼（流沙）；
/*全球的*/
html>*{
字体系列：流沙；
}
身体{
保证金：0；
填充：0；
}
标题{
背景#414a4c；
}
/*身份证*/
#导航栏{
列表样式类型：无；
}
#李国宝{
显示：内联；
左侧填充：35px；
}
#导航栏a{
文字装饰：无；
颜色：白色；
}
#导航栏切换：选中{
}
/*班级*/
.标题栏{
显示：网格；
网格模板柱：2fr 1fr 1fr 1fr；
网格模板行：1fr 1fr；
网格模板区域：
“文本..时钟”
“导航导航…”；
宽度：100%；
网格行间距：5vh；
}
.标题栏#导航栏切换，
.标题栏标签{
网格区域：文本；
左：0；
左边距：25px；
}
.标题栏#titletext{
网格区域：文本；
位置：绝对位置；
左：150px；
}
.标题栏导航{
网格区域：导航；
}
.标题栏#时钟{
网格区域：时钟；
字体系列：Rajdhani、Arial、Helvetica、无衬线字体；
字体大小：30px；
位置：绝对位置；
排名：0；
右：0；
边缘顶部：10px；
右边距：10px；
}
/*关键帧*/

50-0协议和副本；

添加这些样式

#navbar-toggle~nav {
  display: none;
}

#navbar-toggle:checked~nav {
  display: block;
}

@导入url（'https://fonts.googleapis.com/css?family=Rubik:900|拉吉达尼（流沙）；
/*全球的*/
html>*{
字体系列：流沙；
}
身体{
保证金：0；
填充：0；
}
标题{
背景#414a4c；
}
/*身份证*/
#导航栏{
列表样式类型：无；
}
#李国宝{
显示：内联；
左侧填充：35px；
}
#导航栏a{
文字装饰：无；
颜色：白色；
}
#导航栏切换~nav{
显示：无；
}
#导航栏切换：选中~nav{
显示：块；
}
/*班级*/
.标题栏{
显示：网格；
网格模板柱：2fr 1fr 1fr 1fr；
网格模板行：1fr 1fr；
网格模板区域：“文本..时钟”“导航..”；
宽度：100%；
网格行间距：5vh；
}
.标题栏#导航栏切换，
.标题栏标签{
网格区域：文本；
左：0；
左边距：25px；
}
.标题栏#titletext{
网格区域：文本；
位置：绝对位置；
左：150px；
}
.标题栏导航{
网格区域：导航；
}
.标题栏#时钟{
网格区域：时钟；
字体系列：Rajdhani、Arial、Helvetica、无衬线字体；
字体大小：30px；
位置：绝对位置；
排名：0；
右：0；
边缘顶部：10px；
右边距：10px；
}
/*关键帧*/

50-0协议
50-0协议和副本；

您能解释一下~的作用吗？如果需要，我可以在将来的项目中应用它？另外，我不想只隐藏文本我要折叠网格行~是一个同级选择器。它选择一个同级元素你所说的折叠网格行是什么意思？

~

选择器的棘手之处在于它不能返回到一个级别。如果你想更广泛地控制整个导航系统，请将复选框置于导航系统之外，并绝对定位导航系统。这将允许您对兄弟姐妹和兄弟姐妹的子女使用

~

。您的代码（应该是）由于不存在

mainClock（）

函数调用而报告了错误。现在，除了

元素（及其子元素）之外，我们还需要其他HTML吗？如果没有，请将其删除。我们需要所有的CSS吗？如果没有，请将其删除。如果我们不需要自己筛选出不必要的代码，我们就可以更容易地提供帮助。所有的css都是相关的，但html我可以看到wym对不起，时钟函数是javascript，可以直接创建一个实时时钟，所以不需要，但可以了