Html CSS-如何防止打开左右侧边栏？

我是HTML和CSS的初学者。我最近正在学习网络开发，并试图制作一个简单的网页。在该页面上，将有两个侧栏。一个是左侧杆，另一个是右侧杆。但当我点击左边栏菜单图标时，它会同时打开左边栏和右边栏，但我只想打开左边栏。当我点击右边栏菜单图标时，它只会打开右边栏。我做错了什么

html， 身体{ 溢出x：隐藏； 身高：100%； } 身体{ 背景：白色； 填充：0； 保证金：0； 字体系列：tahoma； } 身体{ 背景图像：urlsecene.jpg； 背景尺寸：封面； 背景位置：中心； } .标题{ 显示：块； 保证金：0自动； 宽度：100%； 最大宽度：100%； 盒影：无； 背景色：000000； 位置：固定； 高度：60px！重要； 溢出：隐藏； z指数：10； } 梅因先生{ 保证金：0自动； 显示：块； 身高：100%； 边缘顶部：60像素； } 梅因内尔先生{ 显示：表格； 身高：100%； 宽度：100%； 文本对齐：居中； } .侧边栏菜单{ 身高：100%； 位置：固定； 左：0； 宽度：250px； 边缘顶部：60像素； 转换：translateX-250px； 转换：转换250ms缓进缓出； 背景：线性梯度180度，0000000%，3f5efb 100%； } .右侧边栏菜单{ 身高：100%； 位置：固定； 右：0； 宽度：250px； 边缘顶部：60像素； 转换：translateX250px； 转换：转换250ms缓进缓出； 背景：线性梯度180度，0000000%，3f5efb 100%； } SidebarMenuiner先生{ 保证金：0； 填充：0； 边框顶部：1px实心rgba 255、255、255、0.10； } .RightSideBarMenuIner{ 保证金：0； 填充：0； 边框顶部：1px实心rgba 255、255、255、0.10； } SidebarMenuiner li先生{ 列表样式：无； 颜色：白色； 文本转换：大写； 字体大小：粗体； 填充：20px； 光标：指针； 边框底部：1px实心rgba 255、255、255、0.10； } .RightSideBarMenuiner li{ 列表样式：无； 颜色：白色； 文本转换：大写； 字体大小：粗体； 填充：20px； 光标：指针； 边框底部：1px实心rgba 255、255、255、0.10； } .SidebarMenuiner li a{ 文本转换：大写； 字体大小：粗体； 光标：指针； 文字装饰：无； 颜色：白色； 边界：2px； } .RightSideBarMenuiner li a{ 文本转换：大写； 字体大小：粗体； 光标：指针； 文字装饰：无； 颜色：白色； 边界：2px； } .SidebarMenuiner li span{ 显示：块； 字体大小：14px； 颜色：rgba 255、255、255、0.50； } .RightSideBarMenuiner li span{ 显示：块； 字体大小：14px； 颜色：rgba 255、255、255、0.50； } 输入[类型=复选框]{ 过渡：均为0.3秒； 框大小：边框框； 显示：无； } 输入[类型=复选框]{ 过渡：均为0.3秒； 框大小：边框框； 显示：无； } 输入[类型=复选框]：选中~.侧边栏菜单{ transform:translateX0； } 输入[类型=复选框]：选中~.RightSideBar菜单{ transform:translateX0； } .SideBaricontogle{ 过渡：均为0.3秒； 框大小：边框框； 光标：指针； 位置：绝对位置； z指数：99； 身高：100%； 宽度：100%； 顶部：22px； 左：35px； 高度：22px； 宽度：22px； } .RightSideBaricontogle{ 过渡：均为0.3秒； 框大小：边框框； 光标：指针； 位置：绝对位置； z指数：99； 身高：100%； 宽度：100%； 顶部：22px； 右：35px； 高度：22px； 宽度：22px； } 斯宾纳先生{ 过渡：均为0.3秒； 框大小：边框框； 位置：绝对位置； 高度：3倍； 宽度：100%； 背景色：白色； } .对，斯宾纳{ 过渡：均为0.3秒； 框大小：边框框； 位置：绝对位置； 高度：3倍； 宽度：100%； 背景色：白色； } .水平{ 过渡：均为0.3秒； 框大小：边框框； 位置：相对位置； 浮动：左； 利润上限：3倍； } .右.水平{ 过渡：均为0.3秒； 框大小：边框框； 位置：相对位置； 浮动：对； 利润上限：3倍； } .第1部分{ 过渡：均为0.3秒； 框大小：边框框； 位置：相对位置； 浮动：左； } .右.对角.第1部分{ 过渡：均为0.3秒； 框大小：边框框； 位置：相对位置； 浮动：对； } .第2部分{ 过渡：均为0.3秒； 框大小：边框框； 位置：相对位置； 浮动：左； 利润上限：3倍； } .右.对角.第2部分{ 过渡：均为0.3秒； 框大小：边框框； 位置：相对位置； 浮动：对； 利润上限：3倍； } 输入[类型=复选框]：选中~.sidebaricontogle>.horizontal{ 过渡：均为0.3秒； 框大小：边框框； 不透明度：0； } 输入[类型=复选框]：选中~.sidebaricontogle>.diagonal.part-1{ 过渡：均为0.3秒； 框大小：边框框； 变换：旋转135度； 边缘顶部：8px； } 输入[类型=复选框]：选中~.sidebaricontogle>.diagonal.part-2{ 过渡：均为0.3秒； 框大小：边框框； 变换：旋转-135度； 利润上限：-8px； } 输入[类型=复选框]：选中~.rig htsidebaricontogle>.right.horizontal{ 过渡：均为0.3秒； 框大小：边框框； 不透明度：0； } 输入[类型=复选框]：选中~.rightsidebaricontogle>.right.diagonal.part-1{ 过渡：均为0.3秒； 框大小：边框框； 变换：旋转135度； 边缘顶部：8px； } 输入[类型=复选框]：选中~.rightsidebaricontogle>.right.diagonal.part-2{ 过渡：均为0.3秒； 框大小：边框框； 变换：旋转-135度； 利润上限：-8px； } Munem Sohan Web开发者 公司 脸谱网 啁啾 Sohan Web开发者 萨比尔 苏米 肖冯

---

您需要添加带有复选框的id，以便它可以将复选框唯一地应用于打开切换

html， 身体{ 溢出x：隐藏； 身高：100%； } 身体{ 背景：白色； 填充：0； 保证金：0； 字体系列：tahoma； } 身体{ 背景图像：urlsecene.jpg； 背景尺寸：封面； 背景位置：中心； } .标题{ 显示：块； 保证金：0自动； 宽度：100%； 最大宽度：100%； 盒影：无； 背景色：000000； 位置：固定； 高度：60px！重要； 溢出：隐藏； z指数：10； } 梅因先生{ 保证金：0自动； 显示：块； 身高：100%； 边缘顶部：60像素； } 梅因内尔先生{ 显示：表格； 身高：100%； 宽度：100%； 文本对齐：居中； } .侧边栏菜单{ 身高：100%； 位置：固定； 左：0； 宽度：250px； 边缘顶部：60像素； 转换：translateX-250px； 转换：转换250ms缓进缓出； 背景：线性梯度180度，0000000%，3f5efb 100%； } .右侧边栏菜单{ 身高：100%； 位置：固定； 右：0； 宽度：250px； 边缘顶部：60像素； 转换：translateX250px； 转换：转换250ms缓进缓出； 背景：线性梯度180度，0000000%，3f5efb 100%； } SidebarMenuiner先生{ 保证金：0； 填充：0； 边框顶部：1px实心rgba 255、255、255、0.10； } .RightSideBarMenuIner{ 保证金：0； 填充：0； 边框顶部：1px实心rgba 255、255、255、0.10； } SidebarMenuiner li先生{ 列表样式：无； 颜色：白色； 文本转换：大写； 字体大小：粗体； 填充：20px； 光标：指针； 边框底部：1px实心rgba 255、255、255、0.10； } .RightSideBarMenuiner li{ 列表样式：无； 颜色：白色； 文本转换：大写； 字体大小：粗体； 填充：20px； 光标：指针； 边框底部：1px实心rgba 255、255、255、0.10； } .SidebarMenuiner li a{ 文本转换：大写； 字体大小：粗体； 光标：指针； 文字装饰：无； 颜色：白色； 边界：2px； } .RightSideBarMenuiner li a{ 文本转换：大写； 字体大小：粗体； 光标：指针； 文字装饰：无； 颜色：白色； 边界：2px； } .SidebarMenuiner li span{ 显示：块； 字体大小：14px； 颜色：rgba 255、255、255、0.50； } .RightSideBarMenuiner li span{ 显示：块； 字体大小：14px； 颜色：rgba 255、255、255、0.50； } 输入[类型=复选框]{ 过渡：均为0.3秒； 框大小：边框框； 显示：无； } 输入[类型=复选框]{ 过渡：均为0.3秒； 框大小：边框框； 显示：无； } 输入[type=checkbox]打开边栏菜单：选中~.sidebarMenu{ transform:translateX0； } 输入[type=checkbox]rightopenSidebarMenu:选中~。rightsidebarMenu{ transform:translateX0； } .SideBaricontogle{ 过渡：均为0.3秒； 框大小：边框框； 光标：指针； 位置：绝对位置； z指数：99； 身高：100%； 宽度：100%； 顶部：22px； 左：35px； 高度：22px； 宽度：22px； } .RightSideBaricontogle{ 过渡：均为0.3秒； 框大小：边框框； 光标：指针； 位置：绝对位置； z指数：99； 身高：100%； 宽度：100%； 顶部：22px； 右：35px； 高度：22px； 宽度：22px； } 斯宾纳先生{ 过渡：均为0.3秒； 框大小：边框框； 位置：绝对位置； 高度：3倍； 宽度：100%； 背景色：白色； } .对，斯宾纳{ 过渡：均为0.3秒； 框大小：边框框； 位置：绝对位置； 高度：3倍； 宽度：100%； 背景色：白色； } .水平{ 过渡：均为0.3秒； 框大小：边框框； 位置：相对位置； 浮动：左； 利润上限：3倍； } .右.水平{ 过渡：均为0.3秒； 框大小：边框框； 位置：相对位置； 浮动：对； 利润上限：3倍； } .第1部分{ 过渡：均为0.3秒； 框大小：边框框； 位置：相对位置； 浮动：左； } .右.对角.第1部分{ 过渡：均为0.3秒； 框大小：边框框； 位置：相对位置； 浮动：对； } .第2部分{ 过渡：均为0.3秒； 框大小：边框框； 位置：相对位置； 浮动：左； 利润上限：3倍； } .右.对角.第2部分{ 过渡：均为0.3秒； 框大小：边框框； 位置：相对位置； 浮动：对； 利润上限：3倍； } 输入[type=checkbox]打开边栏菜单：选中~.sidebaricontogle>.horizontal{ 过渡：均为0.3秒； 框大小：边框框； 不透明度：0； } 输入[type=checkbox]OpenSideBar菜单：选中~.sidebarIconToggl e> .第1部分{ 过渡：均为0.3秒； 框大小：边框框； 变换：旋转135度； 边缘顶部：8px； } 输入[type=checkbox]打开边栏菜单：选中~.sidebaricontogle>.diagonal.part-2{ 过渡：均为0.3秒； 框大小：边框框； 变换：旋转-135度； 利润上限：-8px； } 输入[type=checkbox]RightOpenSideBar菜单：选中~.RightSideBareContogle>.right.horizontal{ 过渡：均为0.3秒； 框大小：边框框； 不透明度：0； } 输入[类型=复选框]右侧打开边栏菜单：选中~.rightsidebaricontogle>.right.diagonal.part-1{ 过渡：均为0.3秒； 框大小：边框框； 变换：旋转135度； 边缘顶部：8px； } 输入[类型=复选框]右侧打开边栏菜单：选中~.rightsidebaricontogle>.right.diagonal.part-2{ 过渡：均为0.3秒； 框大小：边框框； 变换：旋转-135度； 利润上限：-8px； } Munem Sohan Web开发者 公司 脸谱网 啁啾 Sohan Web开发者 萨比尔 苏米 肖冯