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

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

问题描述

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

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

但如果元素 also 有 "reMode_selected"

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

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_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>

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