当存在嵌套的同名类元素（如多个 .h-me）时，:hover 会触发所有祖先和后代匹配元素；使用 :not(:has(.h-me)) 可精准限定仅最内层（即无子 .h-me 的）目标元素响应悬停。
当存在嵌套的同名类元素（如多个 `.h-me`）时，`:hover` 会触发所有祖先和后代匹配元素；使用 `:not(:has(.h-me))` 可精准限定仅最内层（即无子 `.h-me` 的）目标元素响应悬停。
在复杂、动态生成的 HTML 结构（例如 KaTeX 渲染的数学公式）中，.h-me 类常被多层嵌套使用，且不允许修改 DOM 结构。此时若直接使用 .h-me:hover，会导致悬停“穿透”——只要鼠标进入任意一层 .h-me，其所有父级 .h-me 元素都会同时高亮，严重干扰用户体验。
解决方案是利用现代 CSS 的逻辑组合伪类：:not(:has(.h-me))。该选择器含义为：“匹配所有不包含 .h-me 子元素的 .h-me 元素”，即只选中叶子节点层级的 .h-me（也就是你真正“直接悬停”的那个最内层元素）。
✅ 正确写法如下：
.h-me:not(:has(.h-me)):hover {
background: rgba(0, 0, 0, 0.1);
}这段 CSS 表示：
立即学习“前端免费学习笔记（深入）”；
- 先筛选出所有 .h-me 元素；
- 排除其中含有任意 .h-me 子元素的元素（即保留仅作为最深层容器的 .h-me）；
- 再对这些“无子 .h-me”的元素添加 :hover 响应。
? 验证示例结构：
<span class="h-me">
<span class="h-me">
<span class="h-me">x</span>
<span class="h-me">y</span>
</span>
</span>只有最内层两个 <span class="h-me">x</span> 和 <span class="h-me">y</span> 会响应悬停；外层包裹容器因包含 .h-me 子节点，被 :not(:has(.h-me)) 过滤掉，不会触发背景变化。
⚠️ 注意事项：
- :has() 是 Level 4 CSS 选择器，目前在 Chrome 105+、Edge 105+、Safari 15.4+ 及 Firefox 121+ 中已原生支持；旧版浏览器需通过 @supports (selector(:has(*))) 进行特性检测，或搭配 JavaScript 回退方案（如监听 mouseover 并 event.target.closest('.h-me') 判断是否为最深层）。
- 不可写作 .h-me:hover:not(:has(.h-me)) —— 顺序错误会导致优先级与语义失效；:hover 必须置于 :not(:has(...)) 之后，确保先筛选再交互。
- 若存在空格或文本节点干扰（如换行符），:has(.h-me) 仍能准确识别子元素，无需额外清理空白节点。
? 总结：面对不可控、高频变动的嵌套结构，CSS :not(:has(...)) 提供了一种声明式、零 JS、高性能的精准悬停控制方案，是现代前端处理动态数学/富文本高亮的理想实践。
