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

Question

[Николай Шабалин]

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

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

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

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;
}

Answer 1

[Денис]

a.link имеет высокий приоритет, выше a:hover

Comments

[Николай Шабалин]

Вы не находите странным, что класс вообще какую-то роль здесь играет на псевдокласс?

[LittleFatNinja]

Николай Шабалин: класс имеет выше приоритет чем псевдокласс

Answer 2

[Дмитрий Шамонов]

Не изучена очень важная тема в CSS - Каскадирование, без понимания этого вопроса будешь постоянно сталкиваться с подобными проблемами.

Comments

[Николай Шабалин]

Понимание есть. Не ясно было почему псевдокласс переопределяется. Я его как-то внутренее отделял, что :hover, могу ниже только :hover переопределить

[Дмитрий Шамонов]

Значение имеет суммарный вес и порядок селекторов.

[Евгений Петров]

Николай Шабалин: Раз непонятно, почему класс имеет тот же приоритет, что и псевдокласс, среди правил одного происхождения — значит нет и понимания.

Answer 3

[Евгений Петров]

Вам бы почитать про каскад и специфичность. Только очень прошу, не на htmlbook.

Comments

[Николай Шабалин]

Ну ссылку Вы дали, там и почитаем =)

Answer 4

[Андрей Мохов]

бывает

Answer 5

[LittleFatNinja]

тут приоритетность играет роль
у класса приоритет выше, чем у псекдокласса
просто ставь ховер ниже .link

a {
  color: red;
}
a.link {
  color: orange;
}
a:hover {
  color: green;
}