当有一个类但没有另一个类时，用于 :before 伪元素的 CSS 选择器

Question

我正在使用 Bootstrap 创建一个用户界面，其中我想通过确保选中单选选项之前出现复选标记来增强单选按钮的外观。我想没问题 - 一个简单的 CSS 点就可以了。所以我尝试了

.active:before{font-family:gftm;content:'\e844';padding-right:0.2em;}

gftm 恰好是我自己的 Fontello 生成的字体。这有效，但它引入了一个意想不到的问题。我还在此特定应用程序中使用Bootstrap toggle 按钮，在其off 状态下使用active toggle-off 类，最终在按钮文本处于关闭状态之前显示一个虚假和误导性的复选标记。我尝试通过修改我的 CSS 规则来解决这个问题

.active:before:not(.toggle-off){font-family:gftm;content:'\e844';padding-right:0.2em;}

除了完全阻止复选标记出现外，它几乎没有做任何事情。我现在使用的解决方案是遵循上面的规则并附加一条规则

.toggle-off:before{content:'' !important;}

但是，我怀疑只有一个 CSS 规则可能有一种更简洁的方法。如果有人能推荐一个可行的方法，我将不胜感激。

Answer 1

您的方法是正确的，除了您在选择器中犯的一个小错误之外，它应该会产生所需的输出。以下是你是如何写的的：

.active:before:not(.toggle-off) {
  font-family: gftm;
  content: '\e844';
  padding-right: 0.2em;
}

但问题是伪元素选择器 (:before) 必须出现在末尾，而不是在否定伪类之前。

以下是W3C Spec 关于伪元素及其存在区域的说明：

每个选择器只能出现一个伪元素，并且如果出现，它必须出现在代表选择器主题的简单选择器序列之后。

下面是W3C Spec 对简单选择器所说的：

简单选择器可以是类型选择器或通用选择器，后跟零个或多个属性选择器、ID 选择器、或伪类，顺序不限。

^{（在引用的文本中都强调我）}

negation (:not) is a pseudo-class 等是一个简单的选择器。这意味着:before 不能出现在它之前。

---

在下面的 sn-p 中，你会看到当伪元素位于末尾时它是如何工作的。

.active:before {
  content: 'Pseudo';
  margin-right: 4px;
}
.active:not(.toggle-off):before { /* this will work */
  color: red;
}
.active:before:not(.toggle-off) { /* this won't work */
  background: beige;
}

<div class='active'>Actual</div>
<div class='active toggle-off'>Actual</div>
<div class='toggle-off'>Actual</div>
<div class=''>Actual</div>