Der universelle Selektor und Pseudoelemente

Der universelle Selektor (*) zielt auf alle Elemente in einem Dokument ab. Es wirkt sich jedoch nicht direkt auf Pseudoelemente wie :before und :after aus.

Pseudoelemente sind Abstraktionen des DOM, die virtuelle Knoten darstellen. Sie sind keine tatsächlichen Elemente und können daher nicht von einfachen Selektoren wie * angesprochen werden.

Um Stile auf Pseudoelemente anzuwenden, müssen Sie sie explizit in den Selektor einschließen, z. B. , : before, *:after.

Dies bedeutet, dass die Deklaration * { box-sizing: border-box; } wirkt sich nicht automatisch auf Pseudoelemente wie :before und :after aus.

Stattdessen müssen Sie :before, :after { box-sizing: border-box; }, um die Box-Sizing-Eigenschaft auf diese Pseudoelemente anzuwenden.

Einige Entwickler verwenden möglicherweise nur * { box-sizing: border-box; } und es treten nie Probleme auf, da Pseudoelemente normalerweise inline angezeigt werden. Die Boxgröße wirkt sich nicht auf Inline-Elemente aus, sodass die Verwendung des universellen Selektors allein keine merklichen Auswirkungen auf Pseudoelemente hat.

Es ist wichtig zu beachten, dass :before, :after Pseudoelemente beeinflusst Von allen Elementen, einschließlich HTML, Head und Body, werden diese Pseudoelemente erst generiert, wenn Sie die Content-Eigenschaft anwenden. Mit diesem Verhalten sind keine Leistungsprobleme verbunden.