HTML/CSS Anchor тегов Стиль Специфичность

Question

Я работаю над проектом, который имеет следующие требования:

1. При наведении на раздел с якорями, цвет всех якорей в этом разделе (не парение/активное состояние) изменение.
2. Цвет активных/зависающих состояний этих якорей должен наследовать нормальный активный/зависающий цвет якоря.

Мне удалось достичь первого требования, но активные/зависающие состояния вообще не изменяются при зависании по конкретной ссылке. Это, очевидно, проблема со спецификой, но я не могу понять, почему.

Вот сводились версия кода: http://codepen.io/dbough/pen/maxrv

a:link, a:visited { 
    color:green; 
} 
a:hover, a:active, header .color a:hover, header .color a:active { 
    color:pink; 
} 
.color a:link, .color a:visited{ 
    color:red; 
} 

$("header").hover(function() { 
    $("header").addClass("color"); 
     }, 
     function() { 
      $("header").removeClass("color"); 
     } 
    ) 

Answer 1

В простейших терминах.

1. Определить цвет для всех ссылок
2. Набора цвета парения hased на ул время зависло

3. Установите другой colow когда наведен

   а: ссылка { цвета : зеленый; }

   ul: hover a { цвет: розовый; }

   ul a: hover { цвет: красный; }

Codepen Example

ли, что не отвечает критериям (?) ... и не JS не требуется

Answer 2

удалить стиль и JQuery парения функцию и попытаться использовать это (только CSS):

html,body { 
    margin:0; 
    padding:0; 
} 
header { 
    width:50%; 
    padding:auto; 
    margin:auto; 
} 
li { 
    display:inline; 
    padding:50px; 
} 

a, a:link, a:visited{ 
    color:green; 
} 
a:hover, a:active{ 
    color:pink !important; 
} 
header:hover a{color:red;} 

Answer 3

Это не имеет ничего общего со спецификой, ваш селектор просто не соответствует.

header .color a:active { 

Вы используете JavaScript, чтобы добавить класс к элементу <header>, но вы пишете селектор, где элемент с классом является потомком <header>.

Удалить этот потомок комбинатор из селекторов:

header.color a:active {