通用选择器*和伪元素 [英] Universal selector * and pseudo elements

问题描述

通用选择器 * 是否影响：之前和：？

让我使用一个例子：

>

  * {box-sizing：border-box; } 
  

...上述声明不会自动包含/影响伪元素，例如：和：之后

？

影响：之前和：之后的伪元素，必须声明这个吗？

  *，*：before，*：after {box-sizing：border-box; } 
 
 
 
 
这是否有意义？ 
 
 
我一直使用 * {box-sizing：border-box; } ，从来没有任何问题的伪元素。但我看到许多教程在 *，*：before，*：after 之后，但是他们从来没有真正解释为什么它们包含 *：before，*：after 。
解决方案
否，通用选择器 * 不会影响伪元素（除非通过继承间接发生） 
 
 
 
通用选择器，像其他命名的元素选择器，如 p 和 div 是简单选择器：
 
 
简单选择器是类型选择器，通用选择器，属性选择器， ，ID选择器或伪类。
 
 
一个简单的选择器， p> 
 
 
虽然伪元素（不是与上面提到的伪类相同的东西）可以在选择器符号中与简单选择器，伪元素完全独立于简单选择器，因为它们表示与实际元素分开的DOM的抽象，以及因此两者代表不同的东西。您不能使用简单的选择器匹配伪元素，也不能在CSS规则中的实际元素中使用伪元素在其选择器中应用样式。
 
 
 
 ，为了匹配任何元素的：和：之后伪元素，  *：before，*：after 。只有 * {box-sizing：border-box; } 不会影响它们，因为 box-sizing 通常不继承，因此它们将保留默认的一个可能的原因，为什么你可能从来没有伪元素的任何问题是，他们是默认显示为内联，因为 box-sizing 对内联元素没有任何影响。
 
 
 
 p> 
 
 
 
 
 
与任何其他简单选择器链相同，如果 * 只有组件，那么你可以离开它，这意味着 *，：before，：after 等效于 *，*：before，*：after 。也就是说，为了清楚起见，通常包括 *   - 大多数作者习惯于将 * 当写入ID和类选择器，而不是伪类和伪元素，所以符号可能看起来很奇怪，甚至是错误的（当它事实上是完全有效的）。
 
 
 
 
我链接到上面的当前选择器规范代表带有双冒号的伪元素。这是在当前规范中引入的一种新的符号，用于区分伪元素和伪类，但大多数 box-sizing 重置使用单冒号表示法来容纳IE8，这支持 box-sizing 但不是双冒号表示法。
 
 
 
 
 before，*：after 将样式应用于任何元素的相应伪元素，其中包括 html ， head 和 body ，伪元素实际上不会生成，直到您应用 code>属性。你不必担心任何性能问题，因为没有。有关详细说明，请参阅我对此相关问题的回答。
 
 
 
 
Does the universal selector * affect pseudo elements like :before and :after?

Let me use an example:

When doing this: 
* { box-sizing: border-box; }
...doesn't the above declaration automatically include/affect pseudo elements like :before and :after as well?

Or, in order to affect pseudo elements like :before and :after, one has to declare this?
*, *:before, *:after { box-sizing: border-box; }
Does this make sense?



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).

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

  
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.

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.

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.

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.

Some notes:


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).
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.
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.


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