Html 如何在CSS选择器中排除特定的类名？

当用户鼠标悬停在类名为

“reMode\u hover”

的元素上时，我试图应用背景色

但是如果元素也

选择了“reMode_”

注意：我只能使用CSS而不能使用javascript，因为我在某种有限的环境中工作

为了澄清，我的目标是在hover上为第一个元素着色，而不是为第二个元素着色

HTML

<a href="" title="Design" class="reMode_design  reMode_hover">
    <span>Design</span>
</a>

<a href="" title="Design" 
 class="reMode_design  reMode_hover reMode_selected">
    <span>Design</span>
</a>

---

一种方法是使用多类选择器（没有空格，因为它是后代选择器）：

.reMode\u悬停：非（.reMode\u已选择）：悬停
{
背景色：#f0ac00；
}

---

在现代浏览器中，您可以执行以下操作：

.reMode_hover:not(.reMode_selected):hover{}

有关兼容性信息，请咨询。

方法1 代码的问题是您选择的

.remode\u悬停

是

.remode\u selected

的后代。因此，让代码正常工作的第一部分是删除该空间

.reMode_selected.reMode_hover:hover

然后，为了使样式不起作用，必须覆盖由

：hover设置的样式。换句话说，您需要对
背景色
属性进行计数。所以最后的代码是

.reMode_selected.reMode_hover:hover {
  background-color:inherit;
}
.reMode_hover:hover {
  background-color: #f0ac00;
}


方法2
另一种方法是使用别人所说的
：not（）
。这将返回任何没有在括号内声明类或属性的元素。在这种情况下，您可以将
.remode_selected
放入其中。这将针对未选择类
.remode\u的所有元素


但是，我不推荐这种方法，因为它是在CSS3中引入的，所以浏览器支持并不理想

方法3
第三种方法是使用jQuery。您可以针对
.not（）
选择器，这类似于在CSS中使用
：not（）
，但具有更好的浏览器支持

您应该删除提到jQuery的“方法3”，因为OP特别提到解决方案的“非javascript”。不应该是：.reMode_hover:not（'.reMode_selected'）：以我的经验，这些引号是必要的。@MakanTayebi关于选择器周围的引号，您提出了一个很好的观点。TL；医生：确实最好使用它们。彻底的解释，还是这样吗？我没有在其他浏览器中尝试过，但在我正在使用的最新版本Firefox中，
：not
选择器只有在我删除引号时才起作用。
.reMode_selected.reMode_hover:hover {
  background-color:inherit;
}
.reMode_hover:hover {
  background-color: #f0ac00;
}