Универсальный селектор и псевдоэлементы

Универсальный селектор (*) предназначен для всех элементов в документе. Однако это не влияет напрямую на псевдоэлементы, такие как :before и :after.

Псевдоэлементы — это абстракции DOM, которые представляют виртуальные узлы. Они не являются реальными элементами и поэтому не могут быть выбраны простыми селекторами, такими как *.

Чтобы применить стили к псевдоэлементам, вам необходимо явно включить их в селектор, например, , : before, *:after.

Это означает, что объявление * { box-sizing: border-box; } не влияет автоматически на псевдоэлементы, такие как :before и :after.

Вместо этого вам нужно объявить :before, :after { box-sizing: border-box; } чтобы применить свойство box-sizing к этим псевдоэлементам.

Некоторые разработчики могут использовать просто * { box-sizing: border-box; } и никогда не сталкивайтесь с проблемами, поскольку псевдоэлементы обычно отображаются в строке. Размер блока не влияет на встроенные элементы, поэтому использование одного универсального селектора не окажет заметного влияния на псевдоэлементы.

Важно отметить, что хотя :before, :after влияет на псевдоэлементы из всех элементов, включая html, head и body, эти псевдоэлементы не будут созданы, пока вы не примените свойство содержимого. Такое поведение не вызывает никаких проблем с производительностью.