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

Question

我想在用户鼠标悬停在类名为"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;
}

- Meow

Answer 1

使用多个class选择器的一种方法（不要使用空格作为后代选择器）：

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

- Explosion Pills

---

不应该是.reMode_hover:not('.reMode_selected'):hover吗？根据我的经验，这些引号是必要的。 - Makan

@MakanTayebi，你提出了一个关于选择器引号的很好的观点。简而言之：最好使用它们。详细的解释请参见https://dev59.com/k2035IYBdhLWcg3wK80m#5578880。 - Ben Johnson

那还是这样吗？我没有在其他浏览器中尝试过，但在我正在使用的最新版本的Firefox中，只有在我“删除”引号时，:not选择器才起作用。 - Alex Rummel

Answer 2

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

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

请查看 http://caniuse.com/css-sel3 以获取兼容性信息。

- imsky

Answer 3

方法 1

你的代码问题在于你选择的 .remode_hover 是 .remode_selected 的一个后代。所以让你的代码正确工作的第一步就是去掉那个空格。

.reMode_selected.reMode_hover:hover

然后，为了使样式不起作用，您需要覆盖由:hover设置的样式。换句话说，您需要抵消background-color属性。因此，最终代码将是

```html ```

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

Fiddle

方法2

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

Fiddle

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

方法3

第三种方法是使用jQuery。您可以使用.not()选择器，类似于在CSS中使用:not()，但支持性更好。

Fiddle

- Cody Guldner

---

你应该删除提到jQuery的“方法3”，因为原帖明确表示不想使用JavaScript来解决问题。 - ScottS