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

Question

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

举个例子:

执行此操作时:

* { box-sizing: border-box; }

...上面的声明不会自动包含/影响像:before这样的伪元素吗？和 :after还有吗？

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

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

这有意义吗？

---

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

Answer 1

不，通用选择器 * 不影响伪元素(除了间接通过 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 和 :after 伪元素，是的，需要包含 *:before, * :after 在选择器中。只有 * { box-sizing: border-box; } 不会影响它们，因为 box-sizing 通常不会被继承，因此，它们将保留默认的 box-sizing: content-box。

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

一些注意事项:

• 与任何其他简单选择器链一样，如果 * 不是唯一的组件，那么您可以将其省略，这意味着 *, :before, :after 等同于 *, *:before, *:after。话虽这么说，为了清楚起见，通常会包含 * — 大多数作者在编写 ID 和类选择器时习惯于将 * 留在外面，而不是伪类和伪元素，所以这个符号对他们来说可能看起来很奇怪甚至是错误的(实际上它完全有效)。

• 我上面链接到的当前选择器规范表示带有双冒号的伪元素。这是当前规范中引入的新符号，用于区分伪元素和伪类，但大多数 box-sizing 重置使用单冒号符号以适应支持 box-sizing 的 IE8 但不是双冒号符号。

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