本文介绍如何利用现代 CSS 的 :has() 伪类解决“父级 悬停时无法控制同级（非嵌套）子菜单显示”的常见布局难题，并提供完整可运行代码与兼容性注意事项。

本文介绍如何利用现代 css 的 `:has()` 伪类解决“父级 `

` 悬停时无法控制同级（非嵌套）子菜单显示”的常见布局难题，并提供完整可运行代码与兼容性注意事项。

在构建响应式导航菜单时，一个典型需求是：当用户将鼠标悬停在“Categories”主菜单项上时，下方独立的 .categories-ul 子菜单应平滑展开。但问题在于——该子菜单并非嵌套在

内部，而是与主菜单

并列存在于
中。因此，传统后代选择器（如 .categories:hover .categories-ul）完全失效，因为二者没有 DOM 包含关系。

此时，CSS 新增的 :has() 关系伪类成为理想解法。它允许我们基于某个元素是否匹配特定条件（例如其内部是否存在被悬停的 .categories），来为该元素的祖先或同级元素设置样式。

关键实现步骤如下：



CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

1. 初始隐藏子菜单：将 .categories-ul 的 display 设为 none；
2. 利用 :has() 定位触发容器：选择
   作为作用域，检查其内部是否存在 :hover 状态的 .categories 元素；
3. 条件激活子菜单：当条件满足时，将 .categories-ul 切换为 display: flex，并可叠加其他悬停样式（如背景色、过渡动画等）。

以下是精简优化后的核心代码：

.pc-nav-ul {
  width: 50%;
  display: flex;
  justify-content: space-between;
  border-bottom-left-radius: 2rem;
  border-bottom-right-radius: 2rem;
  backdrop-filter: hue-rotate(100deg) blur(5px);
}

.pc-nav-li {
  font-size: 1.5rem;
  font-family: var(--text-font);
  padding: 1rem;
  transition: background-color 0.6s, letter-spacing 0.6s;
}

.categories-ul {
  backdrop-filter: hue-rotate(140deg) blur(20px);
  padding: 0.7rem;
  border-radius: 1rem;
  width: 45rem;
  display: none; /* 初始隐藏 */
  justify-content: space-evenly;
  position: fixed;
  top: 5rem;
  z-index: 99999;
  transition: all 0.6s ease;
}

.categories-li {
  font-family: var(--text-font);
  font-size: 1.2rem;
}

.pc-nav-li:hover:not(.categories-li) {
  letter-spacing: 2px;
}

/* ✅ 核心逻辑：当 .pc-nav 内存在悬停的 .categories 时，显示同级 .categories-ul */
.pc-nav:has(.categories:hover) .categories-ul {
  display: flex;
  background-color: rgba(255, 0, 0, 0.1); /* 推荐使用半透明色提升可读性 */
}

<nav class="pc-nav"><ul class="pc-nav-ul">
<li class="pc-nav-li"><a href="#">home</a></li>
    <li class="pc-nav-li categories"><a href="#">categories</a></li>
    <li class="pc-nav-li"><a href="#">setting</a></li>
    <li class="pc-nav-li"><a href="#">login/sign up</a></li>
  </ul>
<!-- 子菜单与 pc-nav-ul 同级，位于 nav 内 --><ul class="categories-ul">
<li class="categories-li"><a href="#">entertainment</a></li>
    <li class="categories-li"><a href="#">literature</a></li>
    <li class="categories-li"><a href="#">science</a></li>
    <li class="categories-li"><a href="#">programming</a></li>
  </ul></nav>

⚠️ 重要注意事项：

• :has() 目前在 Chrome 105+、Edge 105+、Safari 15.4+ 中已稳定支持；Firefox 已实现但默认关闭（需手动启用 layout.css.has-selector.enabled），生产环境务必添加渐进增强策略（例如配合 JavaScript fallback 或降级为点击展开）；
• 避免在 :has() 中使用过于复杂的选择器，以免影响性能；
• 若需支持旧浏览器，推荐将子菜单结构改为语义化嵌套（即
• 内直接包含
  ），再用 .categories:hover .categories-ul 控制显示。

通过 :has()，我们摆脱了对 JavaScript 的强依赖，在纯 CSS 层面实现了跨层级交互逻辑——这是现代前端开发中声明式思维的有力体现。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！