如何在CSSselect器中排除特定的类名？

我想在用户鼠标hover类名为"reMode_hover"的元素时应用背景颜色。

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

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

为了澄清，我的目标是在hover的第一个元素，而不是第二个元素。

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

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

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

http://jsfiddle.net/geatR/

另一个是使用:not()select器

 .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

你的代码的问题是你正在select.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类的.remode_selected

小提琴

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

方法3

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

小提琴