css - 为什么我需要 *, * :after {. ..} 而不仅仅是 * {...}？

Question

有人可以解释为什么通用选择器不适用于 :after 吗？标准的相关部分会很棒，但背后的基本原理也是如此。

编辑:我可以看出我的问题措辞不当；我很抱歉。我的意思是 * { 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 属性不是继承的)。

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