如何在某些类上应用CSS规则并避免其他类

问题描述

应用程序中有一些按钮，其中一些看起来像真实的按钮，而其他则具有其他图标，它们用于对列表进行排序。

我想将鼠标悬停在按钮上，但要避免在“排序”按钮上使用它。

这是代码：

.ui.button {
  background: #262445;
  color: #ffffff;
  &:hover {
    background: #3c3669;
    color: #ffffff;
  }
  &:active,&:focus {
    color: #ffffff;
    background: #1a1635;
  }
}

区别仅在于背景。

代码中的所有按钮在检查模式下都包含ui.button类。 “排序”按钮还包含ui.button.sort-buttons-inactive或ui.button.sort-buttons-active。

我已经尝试过了

.ui.button {
  background: #262445;
  color: #ffffff;
  &:hover:not(sort-buttons-inactive):not(sort-buttons-active) {
    background: #3c3669;
    color: #ffffff;
  }
  &:active,&:focus:not(sort-buttons-inactive):not(sort-buttons-active) {
    color: #ffffff;
    background: #1a1635;
  }
}

因此，当元素不包含sort-buttons-inactive或sort-buttons-active时，将鼠标悬停时不应进行任何更改。

但是，它不起作用。普通按钮可以正常工作，但它还会更改“排序”按钮，将其颜色更改为白色（#ffffff），这是不应该发生的。

有没有办法解决这个问题？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）