我怎样才能使 CSS 仅在元素上不存在另一个类时才使用一个类

Question

我有以下CSS类：

button.current {
   background-color: #000;
}
button:hover {
   background: #0007d5;
}

如何使第二个按钮的背景颜色不会改变？在其他如果没有额外的类，我希望当前和悬停在一个作品上的话按钮上的"非活动"。

<button class="current">Show the current background</button>
<button class="current inactive">Show the current background</button>

Answer 1

您可以使用伪类:not()：

button.current:not(.inactive) {
   background-color: #000;
}
button:hover:not(.inactive) {
   background: #0007d5;
}

jsFiddle 演示