能否使用:not选择器实现列表整体hover效果，但排除特定列表项？

先看你给出的HTML结构：

<ul class="promocode">
  <li>one</li>
  <li>two</li>
  <li class="three">three</li>
</ul>

要实现“列表整体hover生效，但鼠标悬停在.three的<li>上时，整个列表不触发hover”的效果，关键是结合:not()和:has()选择器精准控制触发条件，下面是具体实现：

完整CSS代码 #

/* 列表基础样式 */
.promocode {
  list-style: none;
  padding: 10px;
  border: 1px solid #ccc;
  transition: all 0.3s ease;
}

.promocode li {
  padding: 8px;
  margin: 4px 0;
}

/* 核心：仅当列表被hover且鼠标不在.three元素上时，触发hover样式 */
.promocode:hover:not(:has(.three:hover)) {
  background-color: #f5f5f5;
  border-color: #666;
}

选择器逻辑解释 #

1. :not()选择器的作用：它用来排除符合括号内条件的元素。比如.promocode:not(.xxx)会选择所有class是promocode但不是xxx的列表。
2. :has()选择器的作用：它用来判断当前元素是否包含指定的子元素状态。这里:has(.three:hover)表示“内部有.three元素正在被hover的列表”。
3. 两者结合后，.promocode:hover:not(:has(.three:hover))就只匹配“正在被hover，且内部没有.three元素被hover”的列表，完美满足需求。

备选方案（兼容旧版浏览器） #

如果需要兼容不支持:has()的旧版浏览器，可以用以下方法（缺点是.three元素本身无法响应鼠标事件）：

.promocode:hover {
  background-color: #f5f5f5;
  border-color: #666;
}

.promocode .three:hover {
  pointer-events: none;
}

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