Почему разные свойства одного и того же селектора перезаписывают друг друга

В CSS применяется каскадность — правила объединяются в порядке их определения. Если несколько правил с одинаковой специфичностью применяются к одному элементу, последнее объявленное свойство перезапишет предыдущее.

.button {
  color: red; /* Применится */
  color: blue; /* Перезапишет red */
}

Причины перезаписи:

1. Порядок в файле — последнее правило имеет приоритет.
2. Специфичность селектора — более специфичный селектор перезапишет менее специфичный (#id > .class > tag).
3. !important — принудительно перезаписывает все остальные правила (использовать осторожно).
4. Источник стилей — инлайновые стили (style="") имеют приоритет над внешними, если нет !important.

Пример с конфликтом специфичности:

div.text { color: green; }  /* Специфичность 0-1-1 */  
.text { color: red; }       /* Специфичность 0-1-0 → green применится */