结合nth-child实现hover子元素时改变所有兄弟元素颜色

当<ul>下的某个<li>被hover时，整个<ul>列表（包括该<li>及其所有兄弟元素）的文字颜色发生改变，且不同位置的<li>触发时对应不同颜色：比如第一个<li>hover时变为红色，第二个变为蓝色等。目前已能实现单个<li>hover时改变兄弟元素颜色，但无法结合nth-child实现不同位置对应不同颜色。现有代码如下：

/*when child is hovered, parent will change to this color*/
ul:hover > li a {
  color: var(--apricot); 
}

/*when child is hovered, child will change to this color*/
ul:hover li:nth-child(1) a:hover { 
  color: var(--apricot) !important; 
}

请问是否有方法实现根据hover的子元素不同，让兄弟元素呈现不同颜色？

用CSS的:has()选择器就能实现，现代主流浏览器都已支持这个特性。它能检测<ul>下特定位置的<li>是否处于hover状态，然后统一设置所有<li>内文字的颜色，完全不用写JavaScript。

具体代码示例：

/* 默认样式 */
ul li a {
  color: #333; /* 初始文字颜色 */
  transition: color 0.3s; /* 可选：添加过渡动画让颜色变化更平滑 */
}

/* 第一个<li>hover时，所有<li>的文字变红 */
ul:has(li:nth-child(1):hover) li a {
  color: red;
}

/* 第二个<li>hover时，所有<li>的文字变蓝 */
ul:has(li:nth-child(2):hover) li a {
  color: blue;
}

/* 第三个<li>hover时，所有<li>的文字变绿 */
ul:has(li:nth-child(3):hover) li a {
  color: green;
}

/* 可根据需求继续添加更多nth-child规则 */

说明 #

• :has()选择器会匹配包含符合条件子元素的父元素，这里就是当<ul>下第n个<li>被hover时，选中整个<ul>，然后给里面所有<li>的<a>标签设置对应颜色。
• 不需要使用!important，这个选择器的优先级足够覆盖默认样式。
• 如果需要兼容旧版浏览器，可以用JavaScript监听mouseenter和mouseleave事件，给<ul>添加不同的类名，再通过类名控制颜色，但:has()是最简洁的纯CSS方案。

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