Universal selector * and pseudo elements(通用选择器 * 和伪元素)

本文介绍了通用选择器 * 和伪元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

Does the universal selector * affect pseudo elements like :before and :after?

让我举个例子:

执行此操作时:

* { box-sizing: border-box; }

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

...doesn't the above declaration automatically include/affect pseudo elements like :before and :after as well?

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

Or, in order to affect pseudo elements like :before and :after, one has to declare this?

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

这有意义吗?

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

I have always used just * { box-sizing: border-box; } and never have had any issues with pseudo elements whatsoever. But I see many tutorials doing *, *:before, *:after but they never really explain why they include *:before, *:after in the declaration.

推荐答案

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

No, the universal selector * does not affect pseudo-elements (except indirectly via inheritance, as pseudo-elements are typically generated as children of actual elements).

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

The universal selector, like other named element selectors such as p and div, is a simple selector:

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

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

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

A simple selector, and by extension any complex selector, targets only actual elements.

虽然伪元素(与上面提到的伪类不相同)可以与简单选择器一起出现在选择器符号中，但伪元素与简单选择器完全分开，因为它们 表示与实际元素分离的 DOM 抽象，因此两者代表不同的事物.您不能使用简单的选择器匹配伪元素，也不能将样式应用于 CSS 规则中的实际元素，而其选择器中有伪元素.

Although pseudo-elements (which are not the same thing as pseudo-classes mentioned above) can appear in selector notation alongside simple selectors, pseudo-elements are completely separate from simple selectors as they represent abstractions of the DOM that are separate from actual elements, and therefore both represent different things. You cannot match a pseudo-element using a simple selector, nor can you apply styles to an actual element in a CSS rule with a pseudo-element in its selector.

所以，为了匹配任何元素的 :before 和 :after 伪元素，是的，需要包含 *:before, *:after 在选择器中.只有 * { box-sizing: border-box;} 不会影响它们，因为 box-sizing 通常不会被继承，因此，它们将保留默认的 box-sizing: content-box.

So, in order to match :before and :after pseudo-elements of any element, yes, one will need to include *:before, *:after in the selector. Having just * { box-sizing: border-box; } will not affect them since box-sizing is not normally inherited, and as a result, they will retain the default box-sizing: content-box.

您可能从未对伪元素有任何问题的一个可能原因是它们默认内联显示，因为 box-sizing 对内联元素没有任何影响.

One possible reason why you might never have had any issues with pseudo-elements is that they're displayed inline by default, as box-sizing has no effect on inline elements whatsoever.

一些注意事项:

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

  • As with any other chain of simple selectors, if * is not the only component then you can leave it out, which means *, :before, :after is equivalent to *, *:before, *:after. That being said, the * is usually included for the sake of clarity — most authors are used to leaving the * out when writing ID and class selectors, but not pseudo-classes and pseudo-elements, so the notation may seem strange and even wrong to them (when it is in fact perfectly valid).

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

The current Selectors specification that I link to above represents pseudo-elements with double colons. This is a new notation introduced in the current spec to distinguish pseudo-elements from pseudo-classes, but most box-sizing resets use the single colon notation to accommodate IE8, which supports box-sizing but not the double colon notation.

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

Although *:before, *:after applies styles to the respective pseudo-elements of any element, which includes html, head and body, the pseudo-elements will not actually be generated until you apply the content property. You do not have to worry about any performance issues as there are none. For a detailed explanation, see my answer to this related question.

这篇关于通用选择器 * 和伪元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！