Skip to main content

Як впливає порядок оголошення на підсумковий стиль?

Порядок оголошення впливає на підсумковий стиль у тому випадку, коли два правила мають однакову специфічність і однакове джерело стилів. У такій ситуації спрацьовує принцип:

«Перемагає останнє оголошення»


Приклад

css
p { color: blue; } p { color: red; }

Підсумок: текст буде червоним, тому що друге правило стоїть нижче і перекриває перше.


Коли порядок важливий

Порядок впливає лише якщо:

  • у правил однакова специфічність
  • вони належать до одного типу джерела (наприклад, обидва з одного CSS-файлу)
  • немає !important і inline-стилю

Коли порядок НЕ має сили

Порядок не спрацює, якщо друге оголошення слабше за специфічністю:

css
#id { color: blue; } p { color: red; }

Тут переможе ID, навіть якщо він оголошений вище.


Підсумок

Порядок оголошення працює як останній рівень каскаду: якщо пріоритет і специфічність рівні, нижче записане правило перекриває верхнє.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.