能否在:has选择器中嵌套使用另一个:has选择器？附悬停联动样式问题

需求：当鼠标悬停在.list容器内的.a或.b类元素上时，修改.icons容器内同类别图标的样式。

HTML结构：

<div class="icons">
  <a class="a"></a>
  <a class="b"></a>
</div>

<div class="list">
  <span class="a">A</span>
  <span class="b">B</span>
</div>

尝试以下CSS代码未生效，同时询问是否支持:has选择器的嵌套使用：

icons:has(.a:hover) .a {
  color: blue;
}

问题分析与修复 #

你的CSS代码存在两个关键问题：

1. 缺少类选择器前缀：icons需要写成.icons，否则会被识别为标签选择器，无法匹配class为icons的容器。
2. 选择器逻辑偏差：原代码是检测.icons内部的.a是否悬停，但需求是监听.list内元素的悬停状态，所以需要调整:has的作用对象，并通过兄弟选择器关联.icons容器。

正确的CSS实现 #

如果.icons和.list是同级元素，可使用相邻兄弟选择器结合:has实现需求：

/* 悬停.list内的.a时，修改.icons内的.a */
.list:has(.a:hover) + .icons .a {
  color: blue;
}

/* 悬停.list内的.b时，修改.icons内的.b */
.list:has(.b:hover) + .icons .b {
  color: blue;
}

若两个容器之间存在其他元素，将相邻兄弟选择器+替换为通用兄弟选择器~即可：

.list:has(.a:hover) ~ .icons .a {
  color: blue;
}
.list:has(.b:hover) ~ .icons .b {
  color: blue;
}

关于:has选择器的嵌套使用 #

目前CSS支持:has选择器的嵌套，比如：

/* 示例：当.list内的.a悬停，且.icons内存在.a元素时修改样式 */
.list:has(.a:hover) ~ .icons:has(.a) .a {
  color: blue;
}

但你的场景不需要嵌套:has，基础的:has结合兄弟选择器就足以实现需求。

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