Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «У якому порядку застосовуються CSS-правила?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Порядок застосування CSS-правил** визначається трьома рівнями пріоритету: спочатку джерело стилю (`!important`, inline, зовнішні/внутрішні стилі, типові стилі браузера), потім специфічність селектора, і лише тоді порядок правил у коді. **Ключове:** формула каскаду, важливість → специфічність → порядок у коді.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняCSS-правила застосовуються у строго визначеній черговості, і браузер обирає підсумковий стиль за трьома рівнями пріоритету, згори вниз: --- ### **1) Джерело стилю (найбільший рівень пріоритету)** Від сильнішого до слабшого: 1. `!important` (вручну підвищений пріоритет) 2. **inline-стилі** (атрибут `style=""`) 3. **зовнішні та внутрішні стилі** (файли `.css` і `<style>`) 4. **типові стилі браузера** --- ### **2) Специфічність (точність селектора)** Якщо правила належать одному джерелу, дивляться на селектор. Від точнішого до менш точного: 1. **ID**: `#header` 2. **Класи, атрибути, псевдокласи**: `.item`, `[type="text"]`, `:hover` 3. **Теги та псевдоелементи**: `p`, `h1`, `::after` --- ### **3) Порядок слідування в коді (останнє слово за нижнім селектором)** Якщо джерело і специфічність однакові, перемагає правило, яке **написане пізніше**: ```css p { color: blue; } p { color: black; } /* застосується це */ ``` --- ### **Підсумкова формула каскаду** Браузер вирішує так: **важливість → специфічність → порядок у коді** Тобто спочатку порівнюються джерела, потім точність селекторів, і лише якщо вони рівні, береться останнє за порядком правило.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.