:focus-within能解决下拉菜单点击后闪烁，因其匹配自身或任意后代获焦状态，而:focus仅限自身；需父容器加tabindex="0"启用聚焦，且:focus-within规则须后置覆盖:hover，兼容性需@supports检测并JS降级。
为什么:focus-within能解决下拉菜单点击后闪烁
根本原因是 :focus 只在父元素自身获得焦点时生效，而用户点击子菜单链接瞬间，焦点就从父容器跳到 <a> 上，导致父容器的 :focus 状态立即丢失，CSS 规则回退，子菜单闪一下就消失。这不是渲染延迟或 transition 写错，是焦点作用域天然受限。
而 :focus-within 的语义是“自身或任意后代获得焦点”，只要子链接被点击、Tab 进入、甚至屏幕阅读器聚焦其内部元素，父容器就持续匹配该伪类——菜单稳稳挂着，链接能正常跳转。
必须加 tabindex="0" 才能触发:focus-within
很多开发者写了 .menu-item:focus-within .submenu 却没效果，核心卡点在这里：父容器（比如 <li class="menu-item"> 或 <div class="menu-item">）默认不可聚焦，:focus-within 根本不会激活。
- 给父容器显式添加
tabindex="0"，让它进入 tab 顺序 - 不要用
tabindex="-1"，它只支持 JS 主动聚焦，不参与键盘导航 - 如果父容器已是可聚焦元素（如
<button>），可跳过此步
:focus-within 和 :hover 共存时的样式冲突
想同时支持鼠标悬停展开 + 键盘聚焦展开，不能把两个伪类写成逗号分隔的选择器，否则浏览器可能按顺序解析、覆盖逻辑错乱。
立即学习“前端免费学习笔记（深入）”；
正确做法是分开声明，并让 :focus-within 规则后置，确保它能覆盖 :hover 的隐藏状态：
.menu-item:hover .submenu {
opacity: 1;
visibility: visible;
}
.menu-item:focus-within .submenu {
opacity: 1;
visibility: visible;
}
这样即使鼠标移开，只要焦点还在子菜单内，:focus-within 就继续生效；而纯靠 :hover 的方案在移出瞬间就会收起，造成闪烁感。
Safari 和旧版 Edge 的兼容性兜底要点
:focus-within 在 Safari 15.4+、Edge 79+ 才稳定支持，iOS 15.4 之前和所有 IE 版本完全不识别。直接上 :focus-within 而不做降级，会导致整个下拉菜单在这些环境里不可用。
- 检测支持性可用
@supports (selector(:focus-within))包裹规则 - 对不支持的环境，需用 JS 监听
focusin/focusout事件手动切换类名 - 别依赖
autocomplete="off"来禁用浏览器自动填充——它在 Chrome 中基本失效，改用autocomplete="new-password"更可靠
最易被忽略的是移动端 Safari 的「严格聚焦」行为：即使加了 tabindex="0"，轻点子链接也可能不触发 :focus-within，因为 Safari 默认不给非表单元素分配输入焦点。此时必须配合 role="menuitem" 或显式 contenteditable="true"（仅作 hack）来诱导聚焦。
