CSS не будет работать на каждой ссылке с тем же классом

Question

У меня есть следующий код:

a.navigation, a:active.navigation, a:visited.navigation {
    font-weight: bold;
    text-decoration: none;
    background-color: transparent;
    color: #fff;
    padding: 2px 4px 0px 6px;
    margin-right: 5px;
}
a:hover.navigation {
    font-weight: bold;
    text-decoration: none;
    background-color: #c53838;
    color: #fff;
    border-radius: 2px;
}

, который технически должен давать свойства каждой ссылке, имеющей класс «навигация».Но это не так.Только первая ссылка получает свойства.Я не знаю, получают ли они какое-либо свойство, но, по крайней мере, только первое получает свойство border-radius.

HTML выглядит следующим образом:

<a href="index.html" class="navigation">Startseite</a>
<a href="lexikon.html" class="navigation">Lexikon</a>
<a href="historie.html" class="navigation">Historie</a>
and more

Каждая ссылка должнавыглядят так, когда зависают

Но второй, третий и четвертый выглядят так

Answer 1

Вы неправильно написали свои селекторы. Псевдоселекторы должны идти после класса, как в

a.navigation:hover

Как спецификация говорит ,

Один псевдоэлемент может быть добавлен к последнему простому селектору в цепочка, в этом случае информация о стиле применяется к части каждый предмет.

* * 1010