本文讲解如何通过调整 HTML 元素顺序与正确使用 CSS 相邻/兄弟选择器，实现在复选框（checkbox）勾选状态下，动态切换 的 ::before 伪元素内容，完成汉堡菜单（☰）到关闭图标（✕）的视觉转换。
本文讲解如何通过调整 html 元素顺序与正确使用 css 相邻/兄弟选择器，实现在复选框（checkbox）勾选状态下，动态切换 `
在纯 CSS 驱动的响应式导航菜单中，常借助隐藏的 <input type="checkbox"> 控制菜单显隐，并利用 ::before 或 ::after 伪元素渲染交互图标。但一个常见误区是：CSS 无法向上选择父元素或前序兄弟元素——这意味着若 <label></label> 写在 <input> 之前，#toggle:checked ~ label::before 将完全失效，因为 ~（通用兄弟选择器）只能匹配位于目标元素之后的同级元素。
✅ 正确解法是 将 <input id="toggle"> 移至 <label for="toggle"></label> 之前，确保它们处于同一层级且顺序合理。这样，当复选框被勾选时，可通过 :checked 状态配合 ~ 选择器精准定位后续的 <label></label>，并修改其伪元素内容：
#toggle {
display: none;
}
#toggle:checked ~ .menu {
display: block; /* 显示菜单 */
}
#toggle:checked ~ label::before {
content: "\2716"; /* ✕ 关闭符号（Unicode U+2716） */
}
label::before {
content: "\2630"; /* ☰ 汉堡图标（Unicode U+2630） */
font-size: 1.5rem;
cursor: pointer;
padding-right: 1rem;
}对应 HTML 结构必须严格遵循此顺序：
<div class="main-nav">
<input type="checkbox" id="toggle" />
<label for="toggle"></label>
<nav class="menu">
<a href="#one">Link 1</a>
<a href="#two">Link 2</a>
<!-- 更多链接 -->
</nav>
</div>⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 使用
::before（双冒号）而非:before，以符合现代 CSS 伪元素规范； - Unicode 符号需用
\XXXX转义格式（如\2630），不可直接写☰（部分环境可能编码异常）； -
.menu的显示控制也应基于#toggle:checked ~ .menu，而非+（相邻兄弟），因.menu并非紧邻<input>的下一个元素； - 若需增强可访问性，建议为
<label></label>添加aria-label="Toggle menu"，并在 JS 备用方案中同步处理焦点与状态。
通过这一结构优化与选择器修正，即可零 JavaScript 实现图标状态的优雅切换，兼顾语义化、可维护性与无障碍支持。
