Какой из двух классов со свойством отработает в CSS?

Специфичность CSS (Specificity)

Вопрос о том, какой класс отработает, зависит от специфичности селекторов — это механизм определения приоритета CSS правил.

Основные правила специфичности

Каждый селектор имеет вес, рассчитываемый по формуле:

Специфичность = (Inline styles, IDs, Classes/Attributes/Pseudo-classes, Elements)
                    a            b        c                              d

Примеры расчёта:

/* Элемент: 0,0,0,1 */
p { color: blue; }

/* Класс: 0,0,1,0 */
.highlight { color: red; }

/* ID: 0,1,0,0 */
#main { color: green; }

/* Несколько классов: 0,0,2,0 */
.container.active { color: orange; }

/* Класс + элемент: 0,0,1,1 */
p.highlight { color: purple; }

/* ID + класс + элемент: 0,1,1,1 */
#main .highlight p { color: black; }

/* Встроенный стиль: 1,0,0,0 */
<p style="color: yellow;">Текст</p>

/* !important: переопределяет всё */
p { color: red !important; } /* Победит всё */

Пример из вопроса

<div class="class1 class2">Текст</div>

.class1 {
  color: red;
}

.class2 {
  color: blue;
}

Оба селектора имеют одинаковую специфичность: 0,0,1,0

В этом случае отработает последний в коде: .class2 с цветом blue.

Каскадность (Cascading)

Если две правила имеют одинаковую специфичность, используется правило "последний написанный побеждает":

.button { background: red; }
.button { background: blue; } /* Это отработает */

Более сложный пример

<p class="highlight" id="main">Текст</p>

p { color: blue; }           /* 0,0,0,1 */
.highlight { color: red; }   /* 0,0,1,0 */
#main { color: green; }      /* 0,1,0,0 */

Отработает ID селектор (color: green) потому что ID имеет вес 0,1,0,0, что больше чем класс 0,0,1,0 и элемент 0,0,0,1.

Иерархия приоритета

1. !important — высший приоритет (злоупотреблять нельзя)
2. Встроенные стили (атрибут style) — 1,0,0,0
3. ID селекторы — 0,1,0,0
4. Классы, атрибуты, псевдо-классы — 0,0,1,0
5. Элементы и псевдо-элементы — 0,0,0,1
6. Наследование — самый низкий приоритет

Примеры с атрибутами и псевдо-классами

/* Атрибут: 0,0,1,0 */
input[type="text"] { border: 1px solid blue; }

/* Псевдо-класс: 0,0,1,0 */
a:hover { color: red; }

/* Псевдо-элемент: 0,0,0,1 */
p::first-line { font-weight: bold; }

/* Комбинирование: класс + элемент + псевдо-класс: 0,0,2,1 */
p.active:hover { color: red; }

Best Practices

• Избегайте ID селекторов в CSS (очень высокая специфичность)
• Используйте классы для стилизации (0,0,1,0)
• Ограничивайте цепочки селекторов (не делайте их слишком глубокими)
• Не используйте !important без крайней необходимости
• Применяйте методологию BEM для предсказуемой специфичности
• Проверяйте инструменты разработчика (DevTools), чтобы увидеть какой селектор отработал

/* ✅ Хорошо — низкая специфичность, легко переопределить */
.button { background: blue; }

/* ❌ Плохо — высокая специфичность, сложно переопределить */
#header .navigation div.menu-item a { color: red; }

Понимание специфичности — это основа для написания масштабируемого и поддерживаемого CSS кода.