当用户鼠标将鼠标悬停在其类名称为的元素上时，我尝试应用背景色"reMode_hover"。

但是我不想改变颜色，如果元素也有"reMode_selected"

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

为了明确起见，我的目标是为悬停时的第一个元素着色，但不为第二个元素着色。

的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>

我在下面尝试过，希望第一个定义有效，但事实并非如此。我究竟做错了什么？

的CSS

/* do not apply background-color so leave this empty */
.reMode_selected .reMode_hover:hover 
{
}

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

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

.reMode_hover:not(.reMode_selected):hover 
{
   background-color: #f0ac00;
}

<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_hover:not(.reMode_selected):hover{}

有关兼容性信息，请访问http://caniuse.com/css-sel3。

方法一

与您的代码的问题是，你选择的.remode_hover是一个后代的.remode_selected。因此，使代码正常工作的第一步是删除该空间

.reMode_selected.reMode_hover:hover

然后，为了使样式不起作用，必须覆盖设置的样式:hover。换句话说，您需要反击该background-color属性。所以最终的代码将是

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

小提琴

方法二

另一种方法是使用:not()，如其他人所述。这将返回括号中没有任何类或属性的任何元素。在这种情况下，您将放入.remode_selected其中。这将针对所有没有类别的元素.remode_selected

小提琴

但是，由于CSS3中引入了该方法，因此我不建议使用此方法，因此对浏览器的支持并不理想。

方法3

第三种方法是使用jQuery。您可以定位.not()选择器，这与:not()在CSS中使用类似，但具有更好的浏览器支持

小提琴