nikolayshabalin
@nikolayshabalin
Автор профессиональных курсов в HTML Academy

Стили :hover переопределяются селектором по типу + класс, почему?

Увидеть можно здесь

Суть вопроса именно - "почему"? Где об этом можно почитать.

Вот примеры. Для устойчивости психики, код тестовый. Сделан только для теста!

HTML
<a class="link" href="#">Тест ссылки</a>

если сделать так, то :hover работает

CSS
// первоначальный цвет
a {
  color: red;
}

// ховер
a:hover {
  color: green;
}

// если сделать так
a {
  color: orange;
}
// или так, то всё работает, hover всё ещё работает
.link {
  color: orange;
}


а если так, то hover отрубается

CSS
// первоначальный цвет
a {
  color: red;
}

// ховер
a:hover {
  color: green;
}

// перестает работать hover
a.link {
  color: orange;
}
  • Вопрос задан
  • 262 просмотра
Решения вопроса 1
@sten8509
a.link имеет высокий приоритет, выше a:hover
88e20832643045aaafe9f5fb6b6cfe5e.jpg
Ответ написан
Пригласить эксперта
Ответы на вопрос 4
DMShamonov
@DMShamonov
Frontend developer
Не изучена очень важная тема в CSS - Каскадирование, без понимания этого вопроса будешь постоянно сталкиваться с подобными проблемами.
Ответ написан
Petroveg
@Petroveg
Миром правят маленькие с#@&ки
Вам бы почитать про каскад и специфичность. Только очень прошу, не на htmlbook.
Ответ написан
Ответ написан
Комментировать
LittleFatNinja
@LittleFatNinja
горе девелопер, любитель лютой садомии
тут приоритетность играет роль
у класса приоритет выше, чем у псекдокласса
просто ставь ховер ниже .link
a {
  color: red;
}
a.link {
  color: orange;
}
a:hover {
  color: green;
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы