使用类选择器如.menu-toggle和.nav-menu.active控制导航显示状态，结合属性选择器input[type="checkbox"]:checked + .nav-menu实现无JS菜单开关，通过媒体查询与后代选择器@media (max-width: 768px)调整移动端垂直布局、隐藏主菜单并优化间距，实现响应式导航。
在响应式导航栏设计中，CSS选择器起到了关键作用。它们帮助开发者根据不同屏幕尺寸精准控制导航元素的显示方式，实现桌面端与移动端的平滑切换。
使用类选择器区分不同状态
通过为导航栏添加特定类名，可以定义不同的布局状态。例如，给移动菜单按钮添加 .menu-toggle，隐藏时用 .hidden 类控制显示与隐藏。
常见的做法是结合JavaScript切换类名，如点击按钮时给导航容器添加 .active 或 .show，然后用CSS定义其可见样式。- .nav-menu { display: none; }
- .nav-menu.active { display: flex; }
- .menu-toggle { display: block; }
利用属性选择器处理菜单开关
当使用复选框或按钮控制菜单展开时，属性选择器能精确匹配状态。比如用隐藏的 checkbox 触发菜单显示：
- 结构简洁，无需JavaScript即可实现基础交互
- 适合轻量级响应式设计场景
媒体查询结合后代选择器适配布局
在不同屏幕宽度下，通过媒体查询改变选择器的作用范围，实现布局切换。桌面端使用水平排列，移动端改为垂直堆叠。
立即学习“前端免费学习笔记（深入）”；
@media (max-width: 768px) 中，使用 .navbar .nav-menu 改为垂直flex方向，并隐藏默认显示项。- 为移动端设置汉堡图标：.menu-toggle { display: block; }
- 隐藏主菜单项直到用户展开
- 调整子菜单缩进和间距以适应小屏
