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

Question

Есть ли универсальный селектор * воздействовать на псевдоэлементы, такие как :before а также :after?

Позвольте мне использовать пример:

Делая это:

* { box-sizing: border-box; }

... не содержит ли вышеупомянутое объявление автоматическое включение / влияние на псевдоэлементы :before а также :after также?

Или, чтобы повлиять на псевдоэлементы, такие как :before а также :afterнужно объявить это?

*, *:before, *:after { box-sizing: border-box; }

Имеет ли это смысл?

---

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

Answer 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, Как говорится, * обычно включается для ясности - большинство авторов привыкли оставлять * при написании идентификаторов и селекторов классов, но не псевдоклассов и псевдоэлементов, поэтому запись может показаться им странной и даже неправильной (когда она на самом деле совершенно верна).

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

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

Answer 2

Я могу только привести из спецификации:

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

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

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

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

пример

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