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

Question

我希望使用CSS:not()来定位前选择器.这可能吗？

示例: https ://jsfiddle.net/uuq62b8d/

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

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

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

Answer 1

根据W3C规范：

否定伪类：not（X）是一种功能符号，它以简单的选择器（不包括否定伪类本身）为参数。它代表一个其参数未表示的元素。

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

从上面的语句可以看到:not()，仅接受简单选择器作为参数，伪元素不属于简单选择器类别。因此，不，您无法以尝试的方式实现尝试的目标。

隐藏元素的默认内容但要显示伪元素的内容的一种方法是在元素上进行设置font-size: 0px，然后在伪元素的选择器中将其重写为所需的大小，如以下代码片段所示：

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

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

注意：正如罗布（Rob）在对问题的评论中所指出的那样，最好::对以后的伪元素使用（双冒号）语法。:当需要IE8支持时，开发人员倾向于坚持使用（单冒号）版本，但由于Microsoft自己在16年1月停止了对它的支持，因此现在可能是开始使用双冒号语法的正确时机。但是选择权取决于开发人员，以防万一，您的客户仍然需要IE8支持。

以下是选择器规范对此的评价：

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

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