通用选择器*和伪元素

Question

通用选择器是否*影响像:before和的伪元素:after？

让我举一个例子:

这样做时:

* { box-sizing: border-box; }

......没有上述声明包括自动/影响伪元素,如:before和:after呢？

或者,为了影响像:before和的伪元素:after,必须声明这个？

*, *:before, *:after { box-sizing: border-box; }

这有意义吗？

---

我总是使用just * { box-sizing: border-box; }而且从来没有任何关于伪元素的问题.但我看到许多教程正在做,*, *:before, *:after但他们从未真正解释为什么它们包含*:before, *:after在声明中.

Answer 1

不,通用选择器*不会影响伪元素(除了间接通过继承,因为伪元素通常作为实际元素的子元素生成).

与其他命名元素选择器(如p和)一样,通用选择器div是一个简单的选择器:

甲简单选择器可以是一个类型选择器,通用选择,属性选择器,类选择,ID选择,或伪类.

一个简单的选择器,以及任何复杂的选择器,仅针对实际元素.

虽然伪元素(它们是不相同的事情,如上所述伪类)可以在选择标记一起简单选择出现,伪元素是完全从简单的选择器分开,因为它们表示从实际元素单独的DOM的抽象,因此两者都代表着不同的东西.您不能使用简单选择器匹配伪元素,也不能将样式应用于CSS规则中的实际元素,并在其选择器中使用伪元素.

因此,为了匹配:before和:after任何元素的伪元素,是的,一个需要包含*:before, *:after在选择.由于通常不会继承,因此它们* { box-sizing: border-box; }将不会影响它们box-sizing,因此它们将保留默认值box-sizing: content-box.

您可能永远不会遇到任何伪元素问题的一个可能原因是它们默认显示为内联,因为box-sizing它对内联元素没有任何影响.

一些说明:

• 与任何其他简单选择器链一样,如果*不是唯一的组件,那么你可以将其排除,这意味着*, :before, :after相当于*, *:before, *:after.话虽如此,*为了清楚起见,通常包括 - 大多数作者习惯于*在编写ID和类选择器时离开,而不是伪类和伪元素,因此符号可能看起来很奇怪甚至是错误的(当它实际上完全有效时).

• 我链接到上面的当前选择器规范表示具有双冒号的伪元素.这是当前规范中引入的用于区分伪元素和伪类的新符号,但大多数box-sizing重置使用单个冒号表示法来容纳IE8,IE8支持box-sizing但不支持双冒号表示法.

• 尽管*:before, *:after将样式应用于任何元素的相应伪元素,其中包括html,head并且body,在应用content属性之前,实际上不会生成伪元素.您不必担心任何性能问题,因为没有.有关详细说明,请参阅我对此相关问题的回答.

Answer 2

我只能引用规范:

通用选择器,写为"*",匹配任何元素类型的名称.它匹配文档树中的任何单个元素.

元素类型例如span和div.

由于伪元素没有"元素类型"并且不是文档树的一部分,因此看起来答案是否定的,它不包括伪元素.

但是,由于伪元素从其"父"(至少是可继承的)继承CSS属性,并且通用选择器也影响父元素,因此它间接影响伪元素.

例

• 颜色是继承的
• 边框样式不是,::before元素没有边框