Question

我希望使用CSS：not（）来定位前选择器。这可能吗？

a.button:before {
  content: "Show Text";
}

a.button:not(:before) {
  display: none;
}

<a href="#" class="button">Hide Text</a>

Answer 1

根据W3C Spec：

否定伪类，不是（X），是一个函数符号，它将一个简单的选择器（不包括否定伪类本身）作为参数。它表示一个未被其参数表示的元素。

简单的选择器是类型选择器，通用选择器，属性选择器，类选择器，ID选择器或伪类。

从上面的语句中可以看出，:not()只接受一个简单的选择器作为参数，而伪元素不属于简单的选择器类别。因此，不，你无法按照自己的方式实现目标。

隐藏元素的默认内容但获取要显示的伪元素内容的一种方法是在元素上设置font-size: 0px，然后将其覆盖到所需内容伪元素选择器中的大小，如下面的代码段所示：

＆＃13;

a.button:before {
  content: "Show Text";
  font-size: 16px;
}
a.button {
  font-size: 0px;
}

＆＃13;

<a href="#" class="button">Hide Text</a>

＆＃13;

注意：正如Rob在对该问题的评论中指出的那样，最好开始对伪元素使用::（双冒号）语法。当需要IE8支持时，开发人员倾向于坚持:（单冒号）版本，但是在1月16日微软自己停止对它的支持，可能是开始使用双冒号语法的正确时间。但是选择取决于开发人员，只是在案例中，您有一个仍然需要IE8支持的客户端。

以下是Selectors Spec对此所说的内容：

伪元素由两个冒号（：:)后跟伪元素的名称组成。

当前文档引入了这个::符号，以便在伪类和伪元素之间建立区分。为了与现有样式表兼容，用户代理还必须接受CSS级别1和2中引入的伪元素的先前单冒号表示法（即：first-line，：first-letter，：before和：after）。本规范中引入的新伪元素不允许这种兼容性。

CSS：不是选择器目标：选择器之前和之后

1 个答案: