通用选择器 * 和伪元素

Posted 2023-03-05

技术标签:

【中文标题】通用选择器 * 和伪元素【英文标题】：Universal selector * and pseudo elements 【发布时间】：2014-09-07 19:03:07 【问题描述】：

通用选择器* 会影响:before 和:after 等伪元素吗？

让我举个例子：

执行此操作时：

*  box-sizing: border-box;

...上述声明不会自动包含/影响:before 和:after 等伪元素吗？

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

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

这有意义吗？

我一直只使用* box-sizing: border-box; ，从来没有遇到过任何伪元素问题。但是我看到很多教程都在做*, *:before, *:after，但他们从来没有真正解释过为什么在声明中包含*:before, *:after。

【问题讨论】：

【参考方案1】：

不，通用选择器* 不影响伪元素（通过inheritance 间接影响除外，因为伪元素通常作为实际元素的子元素生成）。

通用选择器与其他命名元素选择器（如p 和div）一样，是simple selector：

简单选择器可以是类型选择器、通用选择器、属性选择器、类选择器、ID 选择器或伪类。

一个简单的选择器，以及任何复杂的选择器，只针对实际元素。

虽然伪元素（与上面提到的伪类不相同）可以与简单选择器一起出现在选择器符号中，但伪元素与简单选择器完全分开@987654323 @，因此两者都代表不同的事物。您不能使用简单的选择器匹配伪元素，也不能将样式应用于 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，它支持 box-sizing 但不支持双冒号符号。

虽然*:before, *:after 将样式应用于any 元素的各个伪元素，包括html、head 和body，但伪元素实际上不会在应用 content 属性之前生成。您不必担心任何性能问题，因为没有。详细解释见我对this related question的回复。

【讨论】：

:before: content:"Read this: "; 是否在每个元素之前放置内容？ :before: content:"Read this: "; 也将内容放在 html 和 body 之前 @Pilot：是的，每个元素，包括html、head 和body。我们是否应该在jsfiddle.net/s7LAN 中看到三个（html、head、body）时间"Read this:"？ @Pilot: head通常被浏览器设置为display: none，因为没有理由正常显示，所以你不会看到它生成的内容。 @BoltClock，这就是我一直在寻找的答案。不知道可以省略*, :before, :after 中的“*”。非常感谢您提供如此详细而清晰的解释。【参考方案2】：

我只能引用specification：