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

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

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

注意: 我只能使用 CSS 而不能使用 javascript，因为我在一些有限的环境中工作。

为了澄清，我的目标是在鼠标悬停时给第一个元素上色，而不是给第二个元素上色。

超文本标示语言

<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;
}
187081 次浏览
小开
最佳答案

一种方法是使用多个类选择器(没有空格，因为它是后代选择器) :

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

小开

方法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;
}

小提琴

方法2

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

小提琴

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

方法3

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

小提琴


提交答案