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

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

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

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

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

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

Хотя псевдо-элементы (которые являются не то же самое, как упоминалось выше псевдо-классы) могут появляться в селекторном обозначениях наряду простых селекторов, псевдо-элементы полностью отделены от простых селекторов, как они represent abstractions of the DOM that are separate from actual elements, и, следовательно, оба представляют собой разные вещи. Вы не можете сопоставить псевдоэлемент с помощью простого селектора и не можете применять стили к фактическому элементу в правиле 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 свойство. Вам не нужно беспокоиться о каких-либо проблемах с производительностью, поскольку их нет. Подробное объяснение см. В моем ответе this related question.

Answer 2

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

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

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

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

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

Example

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