Замена стиля ссылок

Пока я делала этот блог , столкнулась с проблемой, когда изменения в стилях не отображаются сразу.  Проблему удалось решить с помощью жесткой перезагрузки браузера: в Мозилле Ctrl + F5, в Хроме Ctrl+Shift+R. Но после этого возникла другая проблема – не переопределялись стили ссылок.

Изначально были заданы следующие стили:

a {
    font-style: normal;
    font-weight: 300;
    text-decoration: none;
    color: #5c5c5c;
}

a:visited {
    text-decoration: none;
    color: #5c5c5c;
}

a:hover {
    color: #5c5c5c;
    text-decoration: underline;
}

Мне нужно было перекрыть стили bootstrap, и это сработало. Но не сработало для ссылок в виде кнопок, для которых были задан такие стили:

.button-readmore {
    display: block;
    width: 220px;
    padding: 15px 40px;
    margin-top: 50px;	
    border-radius: 50px;
    border: 1px solid #B39148;
    background-color: #ffffff;
    color: #B39148;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;	
    text-align: center;
    text-decoration: none;
}

.button-readmore:hover {
    background-color: #B39148;
    color: #ffffff;
    text-decoration: none;
}

.button-readmore:visited {
background-color: #ffffff;
color: #B39148;
text-decoration: none;
}

Посещенная ссылка отображалась точно так же, как и обычная, но при нажатии она становилась не такой, как мне было надо. Подумав и поискав в гугле (и ничего толком не найдя), я поняла, что надо добавить стили при наведении на посещенные ссылки отдельно:

a:visited:hover {
    color: #5c5c5c;
    text-decoration: underline;
}

.button-readmore:visited:hover {
    background-color: #B39148;
    color: #ffffff;
    text-decoration: none;
}

После этого применяются именно те стили, которые задумывались.