css – 通用选择器*和伪元素

通用选择器*是否影响伪元素,如：before和after？

让我用一个例子：

这样做时

* { Box-sizing: border-Box; }

…以上声明不会自动包含/影响伪元素,如：之前和之后？

或者,为了影响伪元素,如：之前和之后,一个必须声明？

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

这是否有意义？

我一直使用* {Box-sizing：border-Box; }并且从来没有对伪元素有任何问题.但是,我看到许多教程做*,*：之前,*：之后,但他们从来没有真正解释为什么包括*：before,*：after在声明中.

解决方法

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

通用选择器,像其他命名的元素选择器,如p和div,是一个simple selector：

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

一个简单的选择器,通过扩展任何复杂的选择器,只针对实际元素.

虽然伪元素(与上述伪类不一样)可以以简单选择器的选择符表示法出现,但伪元素与represent abstractions of the DOM that are separate from actual elements完全独立于简单选择器,因此它们都代表不同的东西.您不能使用简单选择器匹配伪元素,也不能将样式应用于CSS规则中的实际元素,其选择器中包含伪元素.

所以,为了匹配：before和：之后的任何元素的伪元素,是的,将需要在选择器中包括*：before,*：after.只有* {Box-sizing：border-Box; }不会影响它们,因为通常不会继承框大小,因此,它们将保留默认的Box-size：content-Box.

您可能永远不会对伪元素发生任何问题的一个可能原因是它们默认显示为内联,因为框大小对内联元素没有任何影响.

一些注释：

>与任何其他简单选择器链一样,如果*不是唯一的组件,那么您可以将其退出,这意味着*,：之前,之后等于*,*：before,*：after.就是说,为了清楚起见,通常包含*,大多数作者习惯于在编写ID和类选择器时离开*,而不是伪类和伪元素,因此符号可能看起来很奇怪,甚至错误对他们(实际上是完全有效的).
>我链接到上面的当前选择器规范表示具有双冒号的伪元素.这是在当前规范中引入的新的符号,以区分伪元素和伪类,但是大多数框大小重置使用单个冒号表示法来适应IE8,它支持框大小,但不支持双符号.
>虽然*：before,*：在将样式应用于包含html,head和body的任何元素的各个伪元素之后,在应用content属性之前,实际不会生成伪元素.您不必担心任何性能问题,因为没有.有关详细的解释,请参阅我的答案this related question.

原文地址：https://www.jb51.cc/css/216708.html