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

Posted 2023-03-29

【中文标题】如何在 CSS 选择器中排除特定的类名？

【英文标题】：How to exclude particular class name in CSS selector?

【发布时间】：2013-04-18 14:12:23

【问题描述】：

当用户将鼠标悬停在类名为 "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;

【参考方案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>

【讨论】：

不应该是：.reMode_hover:not('.reMode_selected'):hover 根据我的经验，这些引号是必要的。

@MakanTayebi 关于选择器周围的引号，您提出了一个很好的观点。 TL;DR：确实最好使用它们。 ***.com/a/5578880/1772379 的详细解释。

还是这样吗？没有在其他浏览器中尝试过，但是在我正在使用的最新版本的 Firefox 中，:not 选择器仅在我删除引号时才起作用。

【参考方案2】：

在现代浏览器中，您可以这样做：

.reMode_hover:not(.reMode_selected):hover

有关兼容性信息，请咨询http://caniuse.com/css-sel3。

【参考方案3】：

方法一

您的代码的问题在于您选择了.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;

Fiddle

方法二

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

Fiddle

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

方法3

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

Fiddle

【讨论】：

您应该删除提及 jQuery 的“方法 3”，因为 OP 专门针对解决方案说“不是 javascript”。