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选择器， 或伪类， 。< / p>

^{（重点在两篇引文中都很重要）}

negation (:not) is a pseudo-class等等是一个简单的选择器。这意味着:before无法显示在它之前。

在下面的代码段中，您可以看到伪元素结束时的工作原理。

＆＃13;

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

＆＃13;

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

＆＃13;

CSS选择器：当有一个类但不是另一个类时，在伪元素之前

1 个答案: