利用现代 CSS 的 :has() 伪类，可在不修改 HTML 结构的前提下，通过父容器监听子元素 hover 状态，精准控制对应 .overlay-one 或 .overlay-two 的显示，彻底解决传统相邻/后代选择器无法反向定位的问题。
利用现代 css 的 `:has()` 伪类，可在不修改 html 结构的前提下，通过父容器监听子元素 hover 状态，精准控制对应 `.overlay-one` 或 `.overlay-two` 的显示，彻底解决传统相邻/后代选择器无法反向定位的问题。
在传统 CSS 中，选择器只能“向下”或“向右”匹配（如后代、子代、相邻兄弟），无法根据子元素状态反向影响祖先或后续兄弟元素——这正是本例中“hover 某个 <li> 时显示特定 overlay”的核心难点。过去常依赖 JavaScript 或强行重构 DOM（如将 overlay 嵌入 <li> 内），但自 2022 年起主流浏览器（Chrome 105+、Firefox 121+、Safari 15.4+）已原生支持 :has()，它允许我们基于子元素条件匹配父级或后续兄弟元素，完美契合此场景。
✅ 正确解法：:has() + 后续兄弟选择器
关键在于将 hover 监听逻辑上移到公共父容器（.content），再用 :has(li:hover:nth-child(N)) 判断具体是第几个 <li> 被悬停，最后通过 ~（通用兄弟选择器）定位到目标 overlay：
/* 当 .content 内第一个 li 被 hover 时，显示其后的 .overlay-one */
.content:has(li:hover:nth-child(1)) ~ .overlay-one {
display: block;
background-color: lime;
}
/* 当 .content 内第二个 li 被 hover 时，显示其后的 .overlay-two */
.content:has(li:hover:nth-child(2)) ~ .overlay-two {
display: block;
background-color: yellow;
}
/* 所有 overlay 默认隐藏 */
.overlay-one,
.overlay-two {
display: none;
background-color: red;
padding: 2rem;
}⚠️ 注意：nth-child(1) 和 nth-child(2) 对应的是 <ul> 中的 实际 DOM 顺序位置，而非视觉顺序。本例中，<li class="col-4 myLi">（含“One”）是 <ul> 的第一个子元素，<li class="col-4 myLi">（含“Two”）是第二个，因此直接使用 nth-child(1) 和 nth-child(2) 即可精准匹配。
? HTML 结构无需改动（保持语义清晰）
<div class="content">
<ul class="row">
<li>One</li>
<li>Two</li>
<!-- 其他 li... -->
</ul>
</div>
<div class="content overlay-one">...</div>
<div class="content overlay-two">...</div>这种结构将导航菜单（<ul>）与内容区块（.overlay-*）逻辑分离，符合关注点分离原则。:has() 使 CSS 能“感知”子元素状态并驱动后续兄弟元素样式，避免了将 overlay 嵌套进 <li> 导致的布局污染或 JS 介入。
立即学习“前端免费学习笔记（深入）”；
? 兼容性与降级建议
- 支持情况：Chrome ≥105、Edge ≥105、Firefox ≥121、Safari ≥15.4（桌面及 iOS）。可通过 caniuse.com/css-has 查看实时兼容表。
-
优雅降级：若需支持旧版浏览器，可添加 JavaScript 回退：
document.querySelectorAll('.myLi').forEach((li, index) => { li.addEventListener('mouseenter', () => { document.querySelectorAll('.overlay-one, .overlay-two').forEach(el => el.style.display = 'none'); if (index === 0) document.querySelector('.overlay-one').style.display = 'block'; if (index === 1) document.querySelector('.overlay-two').style.display = 'block'; }); }); - 性能提示：:has() 在复杂 DOM 中可能触发重排，但本例仅用于简单 hover 切换，无性能风险。
✅ 总结
- :has() 是解决“子态驱动父/兄样式”的革命性方案，取代了过去必须依赖 JS 或 DOM 重构的 hack 方式；
- 核心模式为：父选择器:has(子条件) ~ 目标兄弟；
- 保持 HTML 语义化与结构清晰，CSS 专注表现逻辑；
- 生产环境使用前务必校验目标浏览器支持度，并提供轻量级 JS 降级。
从此，hover 交互的 CSS 实现真正回归纯样式层——简洁、声明式、可维护。
