Тип - CSS-хитрости | CSS Альманах 2024

Селектор типа (иногда называемый селектором типа элемента) сопоставляет элементы с соответствующим именем узла элемента, например

, , и теги. Селекторы типа обычно используются для внесения «широких» изменений в стиль сайта.

p ( /* "p" is the type selector */ margin: 0 0 1em 0; )

Обычное использование

Часто селекторы типов устанавливаются как значения по умолчанию, например, при сбросе CSS, когда намерение состоит в том, чтобы переопределить настройки браузера по умолчанию. Пример из первой строки normalize.css, популярного сброса CSS:

article, aside, details, figcaption, figure, footer, header, main, nav, section, summary ( display: block; )

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

Лучшие практики

Обычно считается плохой практикой применять мелкие изменения деталей только с помощью селектора типа. Например, полное применение свойства «color: white» ко всем тегам редко может быть полезным на любом сайте. Это связано с тем, что теги являются общими и используются на всех сайтах для различных целей.

Однако с помощью селектора типа body ( ), такого как установка по умолчанию font-size и line-heightявляется обычным явлением. Частично это связано с тем, что на любой странице может быть только один тег, поэтому вероятность конфликтов меньше.

Специфика и производительность селектора типов

Селекторы типов находятся на самом низком уровне каскада специфичности (обычно обозначаются как 0, 0, 0, 1), что означает, что почти все будет переопределять стиль, примененный только с помощью селектора типа, и добавление селектора типа к классу или идентификатору в ваш CSS обеспечивает минимальную дополнительную специфичность.

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