Стилизация ссылок с помощью CSS

Question

Я пытаюсь оформить эти ссылки:

        <a class="sub" href="#">Email Updates</a>
        <a class="sub" href="#">RSS Updates</a>

С этим CSS:

.sub:link, .sub:visited{height: 50px; width: 308px; background-color: #669900; line-height: 50px; margin: 0 0 0 -15px; font-size: 35px; font-family: "Helvetica", sans-serif; color: #FFFFFF; text-decoration: none;}
.sub:hover{background-color: #336600;}

Вы видите что-то неправильное? Все стили, применяемые к моим ссылкам, являются моими по умолчанию, а именно:

a{
    float:  none;
    color:  #669900;
    text-decoration: underline;
}

И я был уверен, что поместил это ДО моих стилей ".sub". Есть идеи? Спасибо!

Answer 1

Селектор a более специфичен, чем имя класса. Так как ссылка имеет , чтобы быть a, тогда как a может быть класса 'sub', но не может.

Если вы измените CSS на:

a.sub { /* css */ }

становится более конкретным, а

a.sub:link { /* css */ }

тем более.

Answer 2

Используйте также псевдо-класс :active, если все готово.

.sub:link, .sub:visited, .sub:active { }

Answer 3

Попробуйте это;

.sub a:link, .sub a:visited {
height : 50px;
width : 308px;
background-color : #669900;
line-height : 50px;
margin : 0 0 0 -15px;
font-size : 35px;
font-family : "Helvetica", sans-serif;
color : #ffffff;
text-decoration : none;
}
.sub a:hover {
background-color : #336600;
}