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

小提琴

方法2

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

小提琴

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

方法3

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

小提琴