如何在悬停父元素或子元素时，单独为对应元素设置样式？

给定HTML结构：

<div id="parent">
    <a href='#link' id="child">Child</a>
</div>

要实现悬停父元素仅父元素生效样式、悬停子元素仅子元素生效样式的需求，现代CSS可以借助:has()选择器精准控制，代码如下：

/* 父元素仅在自身被悬停且子元素未被悬停时生效样式 */
#parent:hover:not(:has(#child:hover)) {
  background-color: #e0e0e0;
  padding: 10px;
}

/* 子元素悬停时的样式 */
#child:hover {
  color: #ff4444;
  text-decoration: underline;
}

原理说明 #

• #parent:hover:not(:has(#child:hover))：当父元素被悬停，但它的子元素#child没有被悬停时，才触发父元素的样式。直接规避了鼠标悬停在子元素上时，父元素同时触发hover样式的问题。
• #child:hover：直接为子元素设置悬停样式，此时父元素的hover判定条件不满足，不会同时生效。

这种方案无需依赖JavaScript，纯CSS实现，且:has()选择器目前已被Chrome、Firefox、Safari等主流现代浏览器支持，是当前最优的实现方式。

内容的提问来源于stack exchange，提问作者Simon Maurer