Почему якорные псевдоклассы a:link, :visited, :hover, :active должны быть в правильном порядке?

Здесь есть подробное описание:

http://meyerweb.com/eric/css/link-specificity.html

Это связано со спецификой CSS.
Цитата оттуда:

Все они могут применяться к гиперссылке, а в некоторых случаях могут применяться несколько. Например, непосещенная ссылка может быть наведена и активна одновременно с непосещенной ссылкой. Поскольку к гиперссылке применяются три из приведенных выше правил, а все селекторы имеют одинаковую специфичность, то выигрывает последний из перечисленных. Поэтому активный стиль никогда не появится, потому что он всегда будет переопределен стилем наведения. Теперь рассмотрим гиперссылку, которая была посещена. Он всегда и навсегда будет фиолетовым, потому что его стиль посещения превосходит любое другое состояние, включая активное состояние и наведение курсора.
 
Вот почему рекомендуемый порядок в CSS1 выглядит следующим образом:

A:ссылка
A:посетили
A:наведите курсор
A:активно

Кстати, W3 Schools — не лучший ресурс для формальных определений. Вам лучше обратиться к источнику по адресу w3c. Например, не жизненно важно, но рекомендуется.