我如何为一个存在的类编写 CSS 选择，甚至是其他几个不存在的类？

Question

我有这个更少的代码：

btn {
    &.answered {
        color: #bbb;
    }
}

我如何修改它，以便仅当有 .answered 类且没有 btn-success 或 btn-danger 或 btn-warning 类时才将颜色设置为 #bbb？

我确实意识到我可以通过在此代码之后添加 btn-success、btn-danger 和 btn-warning 类来做到这一点，但我真的很想找到一个可以为我做这件事的选择器，所以它不依赖于其他类的位置。

Answer 1

您应该像下面的 sn-p 一样链接 :not 伪选择器。当按钮甚至没有其他 3 个类之一时，这将选择该按钮。换句话说，这相当于说 排除所有存在 x OR y OR z 的元素。

更少的代码：

button{
  .answered{
    &:not(.btn-success):not(.btn-warning):not(.btn-danger) {
      color: red;
    }
  }
}

基于编译输出的演示：

button.answered:not(.btn-success):not(.btn-warning):not(.btn-danger) {
  color: red;
}

<button class='answered'>Click Me</button>
<button class='answered btn-success'>Click Me</button>
<button class='answered btn-danger'>Click Me</button>
<button class='answered btn-warning'>Click Me</button>
<button class='answered btn-warning btn-success'>Click Me</button>
<button class='answered btn-danger btn-success'>Click Me</button>
<button class='answered btn-warning btn-danger'>Click Me</button>
<button class='answered btn-warning btn-danger btn-success'>Click Me</button>

---

:not 选择器（分组）的逗号分隔列表将仅排除具有所有其他 3 个类的元素。当元素上存在其他类中的一个时，它将不起作用（排除）。换句话说，这相当于说排除所有存在x AND y AND z 的元素。

您可以在下面的 sn-p 中看到它如何将红色应用于所有其他类不在一起的元素。它的行为是这样的，因为当元素有.btn-success 时，它仍然没有其他两个之一。

button.answered:not(.btn-success),
button.answered:not(.btn-danger),
button.answered:not(.btn-warning) {
  color: red;
}

<button class='answered'>Click Me</button>
<button class='answered btn-success'>Click Me</button>
<button class='answered btn-danger'>Click Me</button>
<button class='answered btn-warning'>Click Me</button>
<button class='answered btn-warning btn-success'>Click Me</button>
<button class='answered btn-danger btn-success'>Click Me</button>
<button class='answered btn-warning btn-danger'>Click Me</button>
<button class='answered btn-warning btn-danger btn-success'>Click Me</button>

Answer 2

btn {
    &.answered:not(.btn-success):not(.btn-danger):not(.btn-warning) {
        color: #bbb;
    }
}