twitter-bootstrap - :before pseudo-element when there is one class but NOT another class 的 CSS 选择器

Question

我正在与 Bootstrap 合作创建一个用户界面，除其他外，我希望通过确保在所选单选选项之前出现复选标记来增强单选按钮的外观。我想没问题——一个简单的 CSS 就可以做到。所以我尝试了

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

其中 gftm 恰好是我自己的 Fontello 生成的字体。这有效，但带来了一个意想不到的问题。我也在使用Bootstrap toggle此特定应用程序中处于“关闭”状态的按钮使用“事件切换关闭”类，最终会在处于关闭状态的按钮文本之前显示虚假和误导性的复选标记。我尝试通过修改 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关于伪元素及其存在区域的说明:

Only one pseudo-element may appear per selector, and if present it must appear after the sequence of simple selectors that represents the subjects of the selector.

下面是 W3C Spec 的内容关于简单选择器:

A simple selector is either a type selector or universal selector followed immediately by zero or more attribute selectors, ID selectors, or pseudo-classes, in any order.

^{(在引用的文本中强调的是我的)}

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

---

在下面的代码片段中，您将看到当伪元素位于末尾时它是如何工作的。

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