Что делать, если не работает CSS-класс?

#css #отладка #faq

Я пишу css-правило

.nav-users {
  color: red;
}


но на странице нечего не меняется: цвет остаётся серым.
    

Ответы

Ответ 1

Браузеры предоставляют отличные инструменты для отладки css. Не надо ждать, пока
кто-то угадает, в чём проблема. Надо просто взять и посмотреть, что же происходит.
Покажу на примере Хрома.

Сначала надо обновить страницу со сбросом кэша.
В большинстве браузеров это Ctrl + F5.

Если не помогло, то по исследуем по следующему плану:


Щёлкнуть проблемный элемент правой кнопкой и выбрать пункт Исследовать элемент:


Появится панель отладки, на которой на вкладке Elements выделен кликнутый элемент.
Если нужен другой, можно перейти к нему. Затем следует обратить внимание на вкладки
Styles и Computed:


Если в element.style есть интересующее свойство, то


если в html-разметке прописан стиль в атрибуте style, удаляем оттуда лишнее
если нет, кончаем читать этот ответ и переходим к отладке скриптов, которые этот
стиль выставляют (либо перебиваем !importantом, что делать крайне не рекомендуется)



На вкладке Styles надо найти свой селектор.
Если его там нет, то проблема в опечатке или подключении css-файла.


Как видим, свойство зачёркнуто, но восклицательного знака (говорящего о неверном
значении) нет. Это означает, что есть другое правило, имеющее больший приоритет. В
простых случаях достаточно посмотреть на вышестоящие правила и понять, что там надо.
В более запутанных стоит заглянуть на вкладку Computed и посмотреть, какие вообще значения
влияют:


Здесь видно, что селектор .so-header .navigation .-link перебивает наше правило.
Кликом по стрелочке можно перейти к самому правилу, но нам это сейчас не нужно.


Теперь мы знаем, что приоритет используемого правила 0 id, 3 класса, 0 тегов.
Если мы уверены, что наше правило идёт после переопределяемого, то нам достаточно
той же силы. Если нет, то надо побольше.

Самый простой способ - это сделать так:

.nav-users.nav-users.nav-users.nav-users {
  color: red;
}


Но руководствуясь здравым смыслом, стоит всё-таки сделать так:

.so-header .navigation .nav-users {
  color: red;
}


или так:

.so-header .navigation .-link.nav-users {
  color: red;
}


Должно заработать:




Если всё равно не работает.

На шаге 6 стоило заглянуть в переопределяющий стиль - возможно, в нём есть !important:



В таком случаем нам тоже придётся его использовать:

.so-header .navigation .-link.nav-users {
  color: red !important;
}