通用选择器和伪元素

通用选择器 (*) 定位文档中的所有元素。但是，它不会直接影响 :before 和 :after 等伪元素。

伪元素是表示虚拟节点的 DOM 的抽象。它们不是实际元素，因此不能通过像 *.

这样的简单选择器作为目标。要将样式应用于伪元素，您需要将它们显式包含在选择器中，例如 、： before, *:after.

这意味着声明 * { box-sizing: border-box;

不会自动影响伪元素，如 :before 和 :after。相反，您需要声明

:after { box-sizing: border-box; }

一些开发人员可能只使用 * { box-sizing: border-box; } 将 box-sizing 属性应用于这些伪元素。并且永远不会遇到问题，因为伪元素通常是内联显示的。 Box-sizing 不会影响内联元素，因此单独使用通用选择器不会明显影响伪元素。需要注意的是，虽然

:after 影响伪元素所有元素（包括 html、head 和 body）中，只有应用 content 属性后才会生成这些伪元素。不存在与此行为相关的性能问题。