html - 如何在 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_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>