Что такое каскадность в CSS

Каскадность в CSS — это механизм, который определяет, какие стили будут применены к элементу, если к нему одновременно подходят несколько правил. Она работает по трём основным критериям:

1. Источник стилей (приоритет в порядке):
   • Стили браузера (user agent)
   • Пользовательские стили
   • Авторские стили (CSS разработчика)
   • !important (перебивает всё, кроме другого !important с более высоким приоритетом)

2. Специфичность селектора:
   Чем точнее селектор, тем выше его приоритет.
   Например:
   #id (100) > .class (10) > div (1).
   Инлайн-стили (style="...") имеют специфичность 1000.

3. Порядок объявления:
   Если специфичность одинакова, побеждает последнее объявленное правило.

Пример:

/* Специфичность: 1 */
div { color: red; } 

/* Специфичность: 10 */
.text { color: blue; } 

/* Специфичность: 100 + порядок (победит) */
#unique { color: green; }