关于CSS中a:hover:not()选择器异常及多例外设置的咨询

嗨，我来帮你搞定这个导航栏hover效果的问题～

首先，咱们先拆解你遇到的两个核心问题：为什么a:hover:not(.fake)没生效，以及怎么给:not()设置多个例外。

一、为什么a:hover:not(.fake)不生效？ #

最常见的原因有两个：

• 类没加对地方：你创建了.fake类，但有没有把它加到对应的按钮元素上？比如如果那个填充空间的按钮是<a>标签，得确保它有class="fake"（光有id="fake"没用，因为你的选择器是针对类的）。如果按钮是<button>元素，那你的选择器a:hover:not(.fake)自然不会生效——因为它只针对<a>标签的hover状态，按钮不是<a>呀。
• 优先级不够：如果之前的hover样式用了更具体的选择器（比如#nav a:hover），那你的a:hover:not(.fake)优先级更低，会被覆盖。这时候得把选择器写得一样具体，比如#nav a:hover:not(.fake)。

二、怎么给:not()设置多个例外？ #

CSS里可以通过叠加多个:not()选择器来实现多例外，比如你要排除.active和.fake，就这么写：

a:hover:not(.fake):not(.active) {
  /* 你的hover样式，比如颜色、背景变化 */
  background-color: #eee;
  color: #333;
}

注意：虽然CSS4支持在单个:not()里写多个选择器（比如:not(.fake, .active)），但兼容性不如叠加多个:not()，所以更稳妥的写法还是分开写。

给你个完整的示例代码参考 #

结合你的导航栏结构，调整后的CSS大概是这样：

body{
  font-family:'Skranji',sans-serif;
  font-size:100%;
  margin:0;
}
#nav{
  margin:0;
  padding: 1.2rem;
  background-color: #2d3436;
  display: flex;
  gap: 0.8rem;
  align-items: center;
}
/* 导航栏通用链接样式 */
#nav a{
  color: #fff;
  text-decoration: none;
  padding: 0.6rem 1rem;
  border-radius: 4px;
}
/* 只对非.fake、非.active的链接应用hover效果 */
#nav a:hover:not(.fake):not(.active) {
  background-color: #4a4e69;
}
/* 当前页面的.active样式 */
#nav a.active{
  background-color: #00b4d8;
}
/* 填充按钮的样式（可选，让它看起来像个占位） */
#nav a.fake{
  cursor: default;
  color: #636e72;
}

对应的HTML结构大概是：

<div id="nav">
  <div id="menu">
    <a href="#" class="active">首页</a>
    <a href="#">分类</a>
    <a href="#">关于</a>
  </div>
  <a href="#" id="fake" class="fake">&nbsp;</a> <!-- 这里要加class="fake" -->
  <div id="social">
    <a href="#">GitHub</a>
    <a href="#">Twitter</a>
  </div>
</div>

这样就能实现：.active的当前页链接和.fake的填充按钮都不会触发hover效果，其他正常链接hover时会有样式变化～

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