Селектор с наиболее широкой областью применения в CSS — универсальный селектор еще и обладает широчайшими возможностями. Используемый в одиночку, этот селектор задает указанные значения абсолютно всему. Например:

* { color: red; }

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

Универсальный селектор в CSS равносилен нейтронной бомбе, стирающей все, к чему она применена.

Хотя задание красного цвета всему содержимому сайта не представляет практической пользы, этот селектор может быть полезен при использовании в качестве сброса некоторых настроек CSS в начале таблицы стилей:

* {
        border: none;
        box-sizing: border-box;
}

Запись выше удалит рамки по умолчанию у всех элементов и задаст размеры всем блокам по модели border-box (включающей рамку в заданные размеры), что может быть удобным. Еще можно сбросить настройки внешнего и внутреннего отступа и высоты строки в той же записи:

* {
        border: 0; padding: 0;
        line-height: 0;
        margin: 0;
        box-sizing: border-box;
}

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

И последнее: из-за своей ошеломляющей силы использование универсального селектора может снизить быстродействие браузера, особенно у сложных сайтов с большим количеством разметки: таблица стилей должна применить правила в объявлении универсального селектора к каждому тегу до того, как остальной код CSS сможет быть использован. Нужно помнить об этом при оптимизации кода CSS для веб-сайта.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Использование нового способа центрирования
• Использование таблиц стилей браузеров и значения CSS3 по умолчанию
• Использование значения свойства CSS ширины по размеру содержимого