У якому порядку застосовуються CSS-правила?

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) Порядок слідування в коді (останнє слово за нижнім селектором)

Якщо джерело і специфічність однакові, перемагає правило, яке написане пізніше:

---

#Підсумкова формула каскаду

Браузер вирішує так:

важливість → специфічність → порядок у коді

Тобто спочатку порівнюються джерела, потім точність селекторів, і лише якщо вони рівні, береться останнє за порядком правило.