В уроке есть уточнение: "В третьей цели правило .main-menu a:hover нужно расположить перед .main-menu .active a ."
Механику сразу видно - если ослушаться и поставить .main-menu a:hover после .main-menu .active a, пункт “активной страницы” тоже будет попадать под стили .main-menu a:hover и выделяться цветом при наведении. Уточнение есть, а есть ли объяснение такому эффекту? Почему :hover ведет себя именно так, и в каких случаях нужно его ставить до/после других стилей?
1 лайк
Конечно есть: какое правило расположено ниже, то и работает 
У нас одно и то же свойство - цвет фона ссылки - описывается уже двумя правилами: синий либо (если задействован псевдокласс :hover) светло-серый. Так как в конкретно нашей ситуации необходимо, чтобы данный пункт меню всегда был подсвечен синим (чтобы было понятно, какому пункту соответствует открытая страница), независимо от того, наведен на него курсор мыши или нет, то правило, соответствующее синему цвету фона , должно находиться в CSS- коде ниже, чем правило, отвечающее за серый цвет.
3 лайка
Спасибо, поняла.
Просто мне казалось, что a и a:hover все-таки немного разные вещи, и поэтому порядок написания не должен играть роли.
Например, если задать всем ссылкам один цвет текста, а при наведении - другой, то порядок написания никакой разницы не делает)
Думаю, что здесь дело в специфичности селектора.
a и a:hover - имеют разную специфичность и, следовательно, приоритет (расчет значения специфичности селекторов см. курс Наследование и Каскадирование, 15/18). Для селектора а это 1, для a:hover - это 11. Селектор с большим значением специфичности имеет больший приоритет независимо от порядка написания.
У нас же в задании “борьба” между .main-menu .activ a и .main-menu a:hover - у них специфичность уже одинаковая: 21 у каждого и поэтому порядок уже имеет значение.
Если мы чуть изменим заданием и обернем список, например, в див с классом super и “утяжелим” селектор до .super .main-menu a:hover (повысив значение специфичности до 31), а второй селектор оставим без изменения, то порядок снова не будет иметь значения и даже активный пункт меню будет подсвечиваться серым при наведении мышки.
Ларчик просто открывался)
Надумала себе уже какие-то невероятные тонкости, а дело в одинаковой специфичности.
Более чем понятно и доступно объяснили, спасибо большое!