CSS多级菜单如何标记父级选中状态

小伙伴们有没有觉得学习文章很有意思？有意思就对了！今天就给大家带来《CSS多级菜单如何标记父级当前状态》，以下内容将会涉及到，若是在学习中对其中部分知识点有疑问，或许看了本文就能帮到你！

:focus-within 可使父级 li 在子菜单链接获焦时自动高亮，无需 JS；需确保子菜单含可聚焦元素（如带 href 的 a 标签），推荐结合 :hover 使用并注意移动端仅依赖 focus-within。

用 :focus-within 实现多级菜单中父级项的“当前状态”高亮，核心思路是：**让子菜单（如 ul.submenu）获得焦点时，其父级 li 也能响应样式变化**。这比手动加 class 更自动、更语义化，尤其适合键盘导航场景。

确保子菜单可聚焦

默认情况下，

和
• 不可聚焦，需显式赋予 tabindex="0" 或包裹在可聚焦元素内：
  • 推荐方式：给子菜单的
    加 tabindex="0"（需注意语义合理性，仅用于辅助聚焦逻辑）
    • 更优方式：把子菜单放在一个
      或
    • 避免对非交互元素滥用 tabindex，优先保证菜单结构含可聚焦的链接（ 或 ）

    父级 li 响应子菜单焦点

    假设 HTML 结构如下：

    <ul class="menu">
      <li>
        <a href="#">产品</a>
        <ul class="submenu">
          <li><a href="/product/a">A系列</a></li>
          <li><a href="/product/b">B系列</a></li>
        </ul>
      </li>
    </ul>

    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 是实现“自动锁定父级”的轻量、声明式解法，关键是让子菜单区域真正可聚焦，且结构语义清晰。

    终于介绍完啦！小伙伴们，这篇关于《CSS多级菜单如何标记父级选中状态》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！

    前往漫画官网入口并下载 ➜
    您即将跳转至第三方网站，请注意保护好个人信息和财产安全！

    继续访问