可以CSS：not selector target：before和：after选择器 [英] Can CSS :not selector target :before and :after selectors

问题描述

我想使用CSS：not（）来定位前面的选择器。这是否可能？

I am looking to to use CSS :not() to target the before selector. Is this possible?

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

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

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

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

推荐答案

href =https://drafts.c​​sswg.org/selectors-3/#negation =nofollow> W3C Spec ：

否定伪类：：not（X），是采用简单选择器（不包括否定伪类本身）作为参数的函数表示法。

The negation pseudo-class, :not(X), is a functional notation taking a simple selector (excluding the negation pseudo-class itself) as an argument. It represents an element that is not represented by its argument.

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

A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.

从上面的语句可以看出，：not（）只接受一个简单的选择器作为参数，伪元素不属于简单选择器类。因此，不，你不能以你所尝试的方式实现你正在尝试。

As you can see from the above statements, :not() takes in only a simple selector as argument and pseudo-elements do not fall under the simple selector category. Hence, no, you cannot achieve what you are trying in the way you are trying.

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

One way to hide the element's default content but get the pseudo-element's content to be displayed would be to set font-size: 0px on the element and then over-ride it to the required size within the pseudo-element's selector like in the below snippet:

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

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

注意：Rob在他对这个问题的评论中指出，开始使用 :: （双冒号）语法进行伪元素。当需要IE8支持时，开发人员倾向于使用：（单冒号）版本，但是Microsoft自己在2016年1月停止支持它，它可能是正确的时间开始使用双冒号语法。

Note: As pointed out by Rob in his comments to the question, it is better to start using the :: (double colon) syntax for pseudo-elements going forward. Developers tend to stick with the : (single colon) version when IE8 support is required but with Microsoft themselves stopping support for it in Jan '16, it might be the right time to start using the double colon syntax. But choice is upto the developer, just in-case, you have a client who still needs IE8 support.

下面是选择器规格必须说明这一点：

The below is what the Selectors Spec has to say about this:

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

A pseudo-element is made of two colons (::) followed by the name of the pseudo-element.

This :: notation由当前文档引入以便建立伪类和伪元素之间的区别。为了与现有样式表兼容，用户代理还必须接受CSS级别1和2中引入的伪元素的前一个冒号符号（即：第一行，：第一个字母，：before和：after）。此兼容性不允许用于本规范中介绍的新伪元素。

This :: notation is introduced by the current document in order to establish a discrimination between pseudo-classes and pseudo-elements. For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2 (namely, :first-line, :first-letter, :before and :after). This compatibility is not allowed for the new pseudo-elements introduced in this specification.

这篇关于可以CSS：not selector target：before和：after选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！