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

Ответ 1

Нет, универсальный селектор * не влияет на псевдоэлементы (за исключением косвенно через наследование, поскольку псевдоэлементы обычно генерируются как дети фактических элементов).

Универсальный селектор, как и другие селектора элементов, такие как p и div, представляет собой простой селектор:

Простым селектором является либо селектор типов, универсальный селектор, селектор атрибутов, селектор классов, селектор идентификаторов, либо псевдокласс.

Простой селектор и, в свою очередь, любой сложный селектор, предназначенный только для реальных элементов.

Хотя псевдоэлементы (которые не то же самое, что и псевдоклассы, упомянутые выше), могут появляться в нотации селектора наряду с простыми селекторами, псевдоэлементы полностью отделены от простых селекторов, поскольку они представляют абстракции DOM, которые отделены от реальных элементов, и поэтому оба представляют разные вещи. Вы не можете сопоставить псевдоэлемент с помощью простого селектора и не можете применять стили к фактическому элементу в правиле CSS с псевдоэлементом в его селекторе.

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

Одна из возможных причин, по которой у вас, возможно, никогда не возникало проблем с псевдоэлементами, заключается в том, что они отображаются по умолчанию по умолчанию, так как box-sizing не влияет на встроенные элементы.

Некоторые примечания:

• Как и в любой другой цепочке простых селекторов, если * не является единственным компонентом, вы можете его оставить, что означает, что *, :before, :after эквивалентно *, *:before, *:after. При этом * обычно включается для большей ясности - большинство авторов используются для выхода из * при записи идентификаторов и селекторов классов, но не псевдоклассов и псевдоэлементов, поэтому может показаться запись странным и даже неправильным для них (когда это действительно отлично).

• Текущая спецификация Selectors, на которую я ссылаюсь выше, представляет собой псевдоэлементы с двойными двоеточиями. Это новая нотация, введенная в текущую спецификацию, чтобы отличать псевдоэлементы от псевдоклассов, но большинство сбросов box-sizing используют одну нотацию двоеточия для размещения IE8, которая поддерживает box-sizing, но не двойную нотацию.

• Хотя *:before, *:after применяет стили к соответствующим псевдоэлементам любого элемента, который включает в себя html, head и body, псевдоэлементы фактически не будут сгенерированы до тех пор, пока вы не примените content свойство. Вам не нужно беспокоиться о каких-либо проблемах с производительностью, поскольку их нет. Подробное объяснение см. В моем ответе на этот связанный вопрос.

Ответ 2

Я могу только ссылаться на спецификация:

Универсальный селектор, написанный "*", соответствует имени любого типа элемента. Он соответствует любому отдельному элементу в дереве документов.

Типы элементов - это, например, span и div.

Поскольку псевдоэлементы не имеют "тип элемента" и не являются частью дерева документов, похоже, что ответ отрицательный, он не содержит псевдоэлементов.

Однако, поскольку псевдоэлементы наследуют свойства CSS от их "родительских" (по крайней мере, наследуемых), а универсальный селектор также влияет на родителя, он косвенно влияет на псевдоэлементы.

Пример

• цвет наследуется
• стиль рамки не указан, а элемент ::before не имеет границы