为什么我需要*，*：{...}之后而不仅仅是* {...}？

Question

有人可以解释为什么通用选择器不适用于：之后？标准的相关部分将是伟大的，但也是其背后的基本原理。

编辑：我可以看到我的问题措辞不力;我很抱歉。我的意思是* { color: green; }几乎将文档中的所有文本都设为绿色，但不适用于#mypar:after { content:"newly-added content"; }。我意识到原始DOM中没有这个内容......但看起来* { color: green; }就足够了，而不需要写*, *:after { color: green; }。

为了清晰起见，我还编辑了我的问题标题。

第二次修改：这很糟糕......好吧，我试着提供一个简单的示例，它没有帮助。阅读this article之后，我的问题出现了。请注意，作者使用

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

而不是

* {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

Answer 1

通用选择器*匹配任何元素，但伪元素不被视为元素。它们只能由使用伪元素选择器的选择器匹配，例如:after。

在问题中给出的情况下，当使用* { color: green; }并且没有规则覆盖它时，伪元素内容仍然是绿色的。即使伪元素与*不匹配，与其关联的真实元素也会匹配，并且color将从其继承。但是如果您尝试* { border: solid 1px }，您会看到所有元素都有边框，但伪元素没有（border属性不会被继承）。

我认为没有任何官方理由，但似乎没有伪元素 匹配通用选择器的用例。

Answer 2

来自MDN，

  

Asterisk（*）是CSS的通用选择器。它匹配单个   任何类型的元素。

但:after不是元素，是伪元素。然后，它与*不匹配。