如何在CSS选择器中排除特定的类名？ [英] How to exclude particular class name in CSS selector?

问题描述

我试图应用背景颜色，当用户鼠标悬停其类名为reMode_hover的元素。

但是如果元素也有reMode_selected

$，我不想更改颜色b $ b

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

要澄清，我的目标是

 < a href =title =Designclass =reMode_design reMode_hover> 
< span>设计< / span> 
< / a> 
 
< a href =title =Design
 class =reMode_design reMode_hover reMode_selected> 
< span>设计< / span> 
< / a> 
  

我试过下面希望第一个定义将工作，但不是。我做错了什么？

CSS

  / *不应用背景颜色，所以留空* / 
 .reMode_selected .reMode_hover：hover 
 {
} 
 
 .reMode_hover：hover 
 {
 background-color：＃f0ac00; 
} 
  

解决方案

多个类选择器（没有空格，因为它是后代选择器）：

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

http://jsfiddle.net/geatR/

另一种方法是使用：not（） selector

  .reMode_hover：not（.reMode_selected）：hover 
 {
 background-color ：＃f0ac00; 
} 
  

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

I'm trying to apply background-color when a user mouse hover the element whose class name is "reMode_hover".

But I do not want to change color if the element also has "reMode_selected"

Note: I can only use CSS not javascript because I'm working within some sort of limited environment.

To clarify, my goal is to color the first element on hover but not the second element.

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>

I tried below hoping the first definition would work but it is not. What am I doing wrong?

CSS

/* do not apply background-color so leave this empty */
.reMode_selected .reMode_hover:hover 
{
}

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

解决方案

One way is to use the multiple class selector (no space as that is the descendant selector):

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

http://jsfiddle.net/geatR/

Another would be to use the :not() selector

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

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

这篇关于如何在CSS选择器中排除特定的类名？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！