本文详解如何使用现代 CSS :has() 伪类实现父级菜单项 hover 时显示同级子菜单，解决传统相邻/后代选择器无法跨层级匹配的难题，并提供兼容性替代方案。
本文详解如何使用现代 css `:has()` 伪类实现父级菜单项 hover 时显示同级子菜单，解决传统相邻/后代选择器无法跨层级匹配的难题，并提供兼容性替代方案。
在构建响应式导航菜单时，一个常见需求是：当用户将鼠标悬停在「Categories」主菜单项上时，动态显示其对应的下拉子菜单（.categories-ul）。但你遇到的问题很典型——子菜单与触发项不在 DOM 树的嵌套关系中（即 .categories-ul 并非 .categories 的子元素或直接后代），而是同级兄弟元素，因此传统 CSS 选择器（如 .categories:hover .categories-ul）完全失效。
✅ 正确解法：使用 :has() 伪类（推荐）
CSS :has() 是一项突破性特性，允许基于后代、兄弟或子元素的状态来选择祖先或同级元素。本例中，我们需在
.categories-ul {
display: none; /* 初始隐藏 */
/* 其他样式保持不变 */
backdrop-filter: hue-rotate(140deg) blur(20px);
padding: 0.7rem;
border-radius: 1rem;
width: 45rem;
justify-content: space-evenly;
position: fixed;
top: 5rem;
z-index: 99999;
transition: all 600ms ease;
}
/* 关键：通过 :has() 检测 nav 内是否存在 hovered 的 .categories */
.pc-nav:has(.categories:hover) .categories-ul {
display: flex; /* 触发显示 */
background-color: rgba(255, 0, 0, 0.1); /* 建议用半透红而非纯红，更美观 */
}
✅ 优势：语义清晰、无需 JS、纯 CSS 实现、支持平滑过渡（配合 display: flex + transition 需注意：display 本身不可动画，但可搭配 opacity 和 visibility 实现视觉过渡效果）。
⚠️ 注意事项与增强技巧
浏览器兼容性：:has() 已被 Chrome 105+、Edge 105+、Firefox 121+、Safari 15.4+ 原生支持（caniuse.com/?search=%3Ahas）。若需支持旧版浏览器，请采用 JavaScript 方案（如 mouseenter/mouseleave 切换 show 类）。
-
避免布局跳动：display: none → flex 会引发重排。更优雅的做法是结合 opacity 和 visibility：
.categories-ul { opacity: 0; visibility: hidden; pointer-events: none; /* 确保悬停时不意外触发 */ } .pc-nav:has(.categories:hover) .categories-ul { opacity: 1; visibility: visible; pointer-events: auto; } -
定位优化：当前 position: fixed; top: 5rem 可能导致子菜单脱离文档流偏移。建议改为 position: absolute 并将 .pc-nav 设为 position: relative，使定位更可控：
.pc-nav { position: relative; } .categories-ul { position: absolute; top: 100%; left: 0; margin-top: 0.5rem; }
✅ 完整工作示例（精简版）
<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>
<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>
只要确保 HTML 结构中 .categories-ul 与 .pc-nav-ul 同属 .pc-nav 容器内，:has() 即可精准捕获状态并驱动交互。这是现代 CSS 解决“跨层级悬停显示”问题的标准范式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
