如何结合CSS的:has()与:not()选择器实现hover时的精准样式控制？

要实现你需要的效果，核心是先给目标区域设置基础样式，再单独覆盖需要排除的元素样式，具体CSS写法如下：

/* 悬停.bar时，.bar自身变为蓝色 */
div:has(.bar:hover) .bar {
    color: blue;
}

/* 悬停.bar时，div内所有非.bar的元素文本设为灰色 */
div:has(.bar:hover) :not(.bar) {
    color: grey;
}

/* 单独让.foo元素保持原有颜色（替换为你需要的默认色即可） */
div:has(.bar:hover) .foo {
    color: black;
}

为什么之前的写法无效？ #

1. 第一种写法的问题：div:has(.bar:hover) :not(.foo)会选中所有不带.foo类的元素，包括第一个<p>标签。<p>被设置为灰色后，其内部的.foo元素会继承这个颜色，导致整个段落（包括foo）都变灰。
2. 第二种写法的问题：div:has(.bar:hover):not(.foo)是给<div>本身设置灰色，所有子元素（包括.foo）都会继承这个颜色，自然无法达到排除效果。

完整示例代码 #

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt   
  ut labore et dolore magna aliqua. <span class='foo'>Ut enim ad minim veniam</span>, quis 
  nostrud exercitation <span class='foo'>ullamco laboris nisi</span> ut aliquip ex ea commodo 
  consequat.</p>

  <p class='bar'>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
  fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui  
  officia deserunt mollit anim id est laborum.</p>
</div>

div:has(.bar:hover) .bar {
    color: blue;
}

div:has(.bar:hover) :not(.bar) {
    color: grey;
}

div:has(.bar:hover) .foo {
    color: black;
}

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