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

  • Z时代
  • 2024-01-10
  • 分类：问答

当用户将鼠标悬停在类名称为的元素上时，我尝试应用background-color "reMode_hover"。

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

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

为了澄清，我的目标是为悬停时的第一个元素着色，而不是第二个元素。

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

我在下面尝试过，希望第一个定义有效，但事实并非如此。我究竟做错了什么？

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

回答：

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

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

另一个可能是使用:not()选择器

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

以上是 如何在CSS选择器中排除特定的类名？ 的全部内容， 来源链接： utcz.com/qa/431148.html

回到顶部