CSS中:hover伪类与:not选择器搭配使用不生效问题求助

你的nav a:hover :not(i)规则不生效有两个核心原因：

• 选择器的空格语义错误：a:hover :not(i)中间的空格代表后代选择器，含义是「选中a元素悬停状态下的所有子元素中，不为i标签的元素」，但你导航的文字是直接写在a标签内的文本节点，不属于子元素范畴，所以匹配不到。
• :not()伪类的匹配限制：CSS的:not()只能匹配元素节点，无法匹配没有标签包裹的纯文本节点，哪怕没有空格写为nav a:hover:not(i)，含义也是匹配「悬停状态下不为i标签的a元素」，完全不符合需求。

你当前注释外的代码逻辑本身就是正确的，不用额外加:not()规则：

/* 给a标签整体设置悬停样式，文本节点会继承color属性 */
nav a:hover {
  color: white;
  background-color: #0966C2;
}
/* 单独给i标签设置特殊颜色，覆盖继承的白色即可 */
nav a:hover i {
  color: #F3BA64;
}

这个写法的逻辑是：a标签内的纯文本节点会继承父元素a的color属性，而i标签的颜色被更具体的nav a:hover i规则覆盖，刚好实现「除了图标外文字变白、背景变蓝、图标变金色」的需求，性能和可读性都更好。

可以把a标签内的文字用<span>标签包裹，修改后的HTML结构如下：

<li><a href="#"><i class="fas fa-home" aria-hidden="true"></i> <span>Home</span></a></li>

对应的CSS规则就可以写为：

nav a:hover {
  background-color: #0966C2;
}
/* 选中a悬停时所有子元素中不为i的元素（也就是包裹文本的span） */
nav a:hover :not(i) {
  color: #fff;
}
nav a:hover i {
  color: #F3BA64;
}

这种写法适合后续需要对文本单独做其他样式控制的场景。

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