Что значит звёздочка * в начале CSS-файла и зачем её часто пишут?

Задан 33 месяца назад1.1к просмотров2 ответа

Открываю чужие стили, а там в самом верху стоит * { ... } со звёздочкой. Это какой-то особый селектор? Зачем его пишут почти всегда первым?

Полина Алексеева 🐣 Птенец

спросил 33 месяца назад

2 ответа

✓ Принятый ответ — помог автору

Звёздочка * — это универсальный селектор, он выбирает вообще все элементы на странице. Его ставят в начале, чтобы задать общие настройки сразу всем:

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

Что тут происходит:

margin: 0; padding: 0; — сбрасывают стандартные отступы браузера (у заголовков, списков, body они есть по умолчанию и часто мешают);
box-sizing: border-box; — чтобы width включал padding и border, и блоки не «распухали».

Это называют «сбросом стилей» (reset). Удобно начинать с чистого листа, а не бороться с дефолтами браузера.

Олег Павлов 🐣 Птенец

33 месяца назад

Маленькая оговорка: * действует на всё и работает чуть медленнее на огромных страницах, но для учебных и обычных сайтов это совершенно не заметно. Так что смело используй для сброса в начале файла.

Эльвира Козлова 🐣 Птенец

33 месяца назад

Ваш ответ

Войдите, чтобы ответить на вопрос.