Почему селектор .foo a: link, .foo a :hibited {} переопределяет селектор: hover, a: active {} в CSS?

Пример кода: http://jsfiddle.net/RuQNP/

    
    


    

        Example
    

Я ожидал:

Ссылка будет красной при наведении курсора.

Что я получаю:

Ссылка становится зеленой при наведении курсора.

Вопросы:

1. Почему цвет , определенный в .foo a: link, .foo a :hibited , переопределяет селектор в a: hover, a: active ? Что происходит?
2. Я понимаю, что могу исправить это и получить ожидаемое, раскомментировав закомментированный код. Однако я хочу знать, как мы можем исправить селектор .foo a: link, .foo a :hibited , чтобы он не переопределял цвет определено в a: hover, a: active ?

Если я понимаю http://www.w3.org/TR/CSS21/cascade.html#specificity правильно (спасибо, BoltClock), это таблица специфичности для различных селекторов в коде.

a:link         - 0 0 1 1
a:visited      - 0 0 1 1
a:hover        - 0 0 1 1
a:active       - 0 0 1 1
.foo a:link    - 0 0 2 1
.foo a:visited - 0 0 2 1

Таким образом, стиль, определенный для .foo a: link , переопределяет стиль для a: hover , когда и ссылка , и hover псевдоклассы применяются к элементу A класса foo .

Точно так же стиль, определенный для .foo a: visit , переопределяет стиль для a: hover , когда оба посетили , а также hover псевдоклассы применяются к элементу A класса foo .