Измените цвет в A после нажатия на него

Question

У меня проблема с меню внутри заголовка. Он сделал белый цвет для текста, и все выглядит хорошо. Но после нажатия на любую ссылку в списке, текст станет синим. Он помечается так, как будто вы ранее нажали на него. Как я могу остановить эту команду и вернуть текст в белый цвет после возвращения на домашнюю страницу. Он всегда остается синим даже после обновления страницы. И вы должны закрыть браузер или изменить ссылку, чтобы цвет вернулся к белому.

На рисунках вы найдете проблему. введите описание изображения здесь введите описание изображения здесь

.list ul{
    list-style-type: none;
    margin: 27px 0px;
}
.list li{
    display: inline;
    margin-right: 55px;
   
}
 .list a:link{
    font-size: 19px;
    text-decoration: none;
    padding: 27px 20px;
    color: #ffffff;
}
.list a:hover{
    background-color: #575757;
}
.list a:active{
    color: #ffffff;
    background-color: #323232;
}
/* gs*/
.list a.gs{
    border: solid 1px #ffffff;
    padding: 11px 20px;
    border-radius: 26px;
    font-size: 17px;
    
}
.list a.gs:hover{
    border: solid 1px #FFAC41;
    background-color: #FFAC41;
    color: #000000;
}

<div class="list">
    <ul>
      <li><a href="#">About</a></li>
      <li><a href="#">The prices</a></li>
      <li><a href="#" class="gs">Get Started</a></li>
    </ul>
  </div>

Answer 1

Требуется модификатор :visited

.list a:visited {
   color: #ffffff;
}

Источник - https://www.w3schools.com/css/css_link.asp

Четыре состояния ссылок:

a:link - обычная невидимая ссылка

a:visited - ссылка, которую посетил пользователь

a:hover - ссылка, когда пользователь наводит на нее курсор

a:active - ссылка на момент нажатия

Answer 2

Вы должны добавить селектор :visited к свойству .list a:link, например, :

.list ul {
  list-style-type: none;
  margin: 27px 0px;
}

.list li {
  display: inline;
  margin-right: 55px;
}

.list a:link,
.list a:visited {
  font-size: 19px;
  text-decoration: none;
  padding: 27px 20px;
  color: #ffffff;
}

.list a:hover {
  background-color: #575757;
}

.list a:active {
  color: #ffffff;
  background-color: #323232;
}


/* gs*/

.list a.gs {
  border: solid 1px #ffffff;
  padding: 11px 20px;
  border-radius: 26px;
  font-size: 17px;
}

.list a.gs:hover {
  border: solid 1px #FFAC41;
  background-color: #FFAC41;
  color: #000000;
}

<div class="list">
  <ul>
    <li><a href="#">About</a></li>
    <li><a href="#">The prices</a></li>
    <li><a href="#" class="gs">Get Started</a></li>
  </ul>
</div>