如何在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;
}

Answer 1

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

.reMode_selected.reMode_hover:hover 
{
    background-color: transparent;
}

http://jsfiddle.net/geatR/

另一种方法是使用:not()选择器

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

http://jsfiddle.net/geatR/1/

Answer 2

在现代浏览器中，您可以这样做：

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

请参阅http://caniuse.com/css-sel3了解兼容性信息。

Answer 3

方法1

您的代码存在的问题是，您选择.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()

Fiddle

方法2

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

类的所有元素

Fiddle

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

方法3

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

Fiddle