:focus-within 可使父级 li 在子菜单链接获焦时自动高亮，无需 JS；需确保子菜单含可聚焦元素（如带 href 的 a 标签），推荐结合 :hover 使用并注意移动端仅依赖 focus-within。
用 :focus-within 实现多级菜单中父级项的“当前状态”高亮，核心思路是：**让子菜单（如 ul.submenu）获得焦点时，其父级 li 也能响应样式变化**。这比手动加 class 更自动、更语义化，尤其适合键盘导航场景。
确保子菜单可聚焦
默认情况下， 不可聚焦，需显式赋予 tabindex="0" 或包裹在可聚焦元素内：
- 推荐方式：给子菜单的
加tabindex="0"（需注意语义合理性，仅用于辅助聚焦逻辑） - 更优方式：把子菜单放在一个 或
内，并确保其中的链接（）可 tab 到；只要任一后代获得焦点，:focus-within就会触发- 避免对非交互元素滥用
tabindex，优先保证菜单结构含可聚焦的链接（或）父级
li响应子菜单焦点假设 HTML 结构如下：
CSS 中这样写即可让父级
li在子菜单任意链接获得焦点时“激活”：立即学习“前端免费学习笔记（深入）”；
.menu li:focus-within { background-color: #007bff; color: white; } .menu li:focus-within > a { color: inherit; }✅ 这样，当用户用 Tab 键进入子菜单中的某个
时，整个父li会立刻高亮 —— 无需 JS，不依赖 URL 或 class 切换。兼顾鼠标悬停与键盘焦点
实际项目中常需同时支持 hover 和 focus 行为。可以合并写法，避免样式冲突：
.menu li:hover, .menu li:focus-within { background-color: #007bff; color: white; } /* 可选：移除 outline 但保留可访问性 */ .menu li:focus-within > a:focus { outline: none; } /* 建议：为聚焦状态加一点视觉强化，比如边框或阴影 */ .menu li:focus-within { box-shadow: 0 0 0 2px rgba(0,123,255,0.5); }⚠️ 注意：
:hover和:focus-within共存时，要测试两者叠加效果是否自然；移动端无 hover，:focus-within就成了主要状态依据。兼容性与降级处理
:focus-within在现代浏览器（Chrome 60+、Firefox 52+、Safari 15.4+、Edge 79+）中已广泛支持。若需兼容老版本 Safari（- 用 JS 监听子菜单内链接的
focusin事件，动态给父li添加.is-focused类 - 或退回到传统方案：靠 JS 根据 URL 或点击行为维护
.active类 - 但纯 CSS 方案下，建议将
:focus-within视为增强体验，基础菜单功能不依赖它
基本上就这些 ——
:focus-within是实现“自动锁定父级”的轻量、声明式解法，关键是让子菜单区域真正可聚焦，且结构语义清晰。 - 避免对非交互元素滥用
