В div применится цвет при обращении по тегу или по классу

Специфичность CSS селекторов: тег vs класс

Ответ: Применится цвет по КЛАССУ.

Это вопрос о специфичности селекторов в CSS. Селектор по классу имеет выше специфичность, чем селектор по тегу.

Пример

<div class="red">Какой цвет?</div>

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

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

Результат: Текст будет КРАСНЫЙ (red)

Потому что класс имеет выше специфичность.

Система специфичности CSS

CSS использует трехуровневую систему специфичности:

(inline-styles, ID selectors, Classes/Attributes/Pseudo-classes, Elements)
(a, b, c, d)

Где:

• a = inline style атрибуты (style="...")
• b = ID селекторы (#id)
• c = класс селекторы (.class), атрибут селекторы ([attr]), псевдо-классы (:hover)
• d = тег селекторы (div, p, span) и псевдо-элементы (::before)

Примеры специфичности

/* (0, 0, 0, 1) - селектор по тегу */
div { }
p { }
button { }

/* (0, 0, 1, 0) - селектор по классу */
.red { }
.primary-button { }

/* (0, 1, 0, 0) - селектор по ID */
#header { }
#main-content { }

/* (1, 0, 0, 0) - inline style */
<div style="color: red;"> ВСЕГДА побеждает! </div>

/* (0, 0, 1, 1) - класс + тег */
div.red { }  /* Специфичность выше, чем просто .red или просто div */

/* (0, 1, 1, 1) - ID + класс + тег */
#header .nav-item.active { }

/* (0, 0, 2, 0) - два класса */
.primary.active { }

Сравнение специфичности

/* Пример 1 */
div { color: blue; }           /* (0, 0, 0, 1) */
.red { color: red; }            /* (0, 0, 1, 0) */
/* Победит .red, потому что (0, 0, 1, 0) > (0, 0, 0, 1) */

/* Пример 2 */
.header { color: blue; }        /* (0, 0, 1, 0) */
#main { color: red; }           /* (0, 1, 0, 0) */
/* Победит #main, потому что (0, 1, 0, 0) > (0, 0, 1, 0) */

/* Пример 3 */
.header.nav { color: blue; }   /* (0, 0, 2, 0) */
.header { color: red; }         /* (0, 0, 1, 0) */
/* Победит .header.nav, потому что (0, 0, 2, 0) > (0, 0, 1, 0) */

/* Пример 4 - inline style всегда побеждает */
div { color: blue; }           /* (0, 0, 0, 1) */
#main { color: red; }          /* (0, 1, 0, 0) */
/* <div style="color: green;"> ВСЕГДА ЗЕЛЕНЫЙ! */

!important - ядерная опция

div { color: blue; }
.red { color: red !important; }

/* .red с !important всегда побеждает */
/* <div class="red"> -> КРАСНЫЙ */

Важно: Избегай !important, он ломает специфичность и вызывает проблемы в будущем.

Практический пример с конфликтом

<button class="button primary-btn">Нажми меня</button>

/* Специфичность: (0, 0, 0, 1) */
button {
  background: gray;
  color: white;
}

/* Специфичность: (0, 0, 1, 0) - ПОБЕЖДАЕТ */
.button {
  background: blue;
  color: white;
  padding: 10px 20px;
}

/* Специфичность: (0, 0, 1, 0) - РАВНА .button */
.primary-btn {
  background: green;
}

Что произойдет:

• background будет GREEN (последний селектор с одинаковой специфичностью)
• если .primary-btn идет ДО .button, то background будет BLUE
• если .primary-btn идет ПОСЛЕ .button, то background будет GREEN

Вывод: при одинаковой специфичности - побеждает последний в CSS файле.

Как считать специфичность

Метод "слева направо":

/* #header .nav-item.active a:hover */

/* Разберем: */
#header              /* (0, 1, 0, 0) - ID */
.nav-item           /* (0, 0, 1, 0) - класс */
.active             /* (0, 0, 1, 0) - класс */
a                   /* (0, 0, 0, 1) - тег */
:hover              /* (0, 0, 1, 0) - псевдо-класс (как класс) */

/* Сумма: (0, 1, 3, 1) */

С другой стороны:

/* button.submit */
button              /* (0, 0, 0, 1) */
.submit             /* (0, 0, 1, 0) */

/* Сумма: (0, 0, 1, 1) */

Потому что (0, 1, 3, 1) > (0, 0, 1, 1), первый побеждает.

Реальный пример: Tailwind CSS

<div class="text-blue-600 text-red-600">Какой цвет?</div>

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

/* В tailwind.css (или generated) */
.text-blue-600 { color: rgb(37, 99, 235); }
.text-red-600 { color: rgb(220, 38, 38); }

/* Результат: RED, потому что .text-red-600 идет после */

Именно поэтому в Tailwind порядок классов в HTML не всегда очевиден.

Лучшие практики

1. Избегай очень высокой специфичности

/* Плохо - очень специфично, сложно переопределить */
#main .container .header .nav-item.active {
  color: red;
}

/* Хорошо - специфично, но не переусложнено */
.nav-item.active {
  color: red;
}

2. Используй классы для стилей, не ID

/* Плохо */
#header { }
#footer { }

/* Хорошо */
.header { }
.footer { }

3. BEM методология избегает проблем специфичности

/* BEM */
.card { }                    /* (0, 0, 1, 0) */
.card__header { }            /* (0, 0, 1, 0) */
.card__header--active { }    /* (0, 0, 1, 0) */

/* Все имеют одинаковую специфичность, порядок в CSS решает */

4. Не используй !important (если не абсолютная необходимость)

/* Плохо - сломает специфичность */
.button { color: red !important; }

/* Хорошо - правильная специфичность */
.button { color: red; }

Инструменты для проверки специфичности

1. Chrome DevTools:
   - Inspect элемент
   - Смотрите каскад стилей
   - Перечеркнутые стили имеют МЕНЬШЕ специфичность
   
2. Онлайн калькуляторы:
   - specificity calculator (search в Google)

Итоги

• Класс имеет выше специфичность чем тег
• Специфичность считается по уровням: ID > класс > тег
• Inline style побеждает все
• !important останавливает каскад (избегай его)
• При одинаковой специфичности - побеждает последний в CSS
• Используй классы вместо ID для стилей
• BEM методология помогает избежать проблем специфичности