Проблема с псевдоклассом: посещения... Все ссылки отображаются одним и тем же цветом после того, как они "посещены", несмотря на то, что в CSS есть разные цвета

Question

У меня проблемы с псевдоклассом a: посещения (или одного из других, может быть?). Я хочу, чтобы ссылки отображались как разные цвета в разных элементах (черный в.link-box и красный в #main-menu независимо от того, были они посещены или нет), что они делают ПЕРВЫМ, но как только они это сделают " Посещенные "ссылки, они все одного цвета (красные).

Есть идеи, что я здесь не так сделал?

.link-box {

  background-color: blue;

  
}

.link-box a:link,

a:visited,

a:active {

  color: black;

  padding-left: 10px;

  font-weight: bold;

}

.link-box a:hover {

  color: #D31900;

  text-decoration: none;

}


#main-menu {

  height: 60px;

  background-color: black;

}

#main-menu a:link,

a:visited,

a:active {

  color: red;

  text-transform: uppercase;

}

#main-menu a:hover {

  color: #FF6600;

}

<div class="link-box">

 <a href="">Link box link</a>

</div>


<div id="main-menu">


    <a href="">main menu link</a>
  

 
</div>

Answer 1

Получатель чего-то a: псевдоклассы в каскаде имеют значение.

Обычная мнемоника, чтобы помнить, в каком порядке стилизовать a: псевдоклассы это:

Любовь ненависть

то есть. Ссылка, Посещено, Наведение, Активно

Переупорядочите свою таблицу стилей, как это:

.link-box a:link,
.link-box a:visited {
  color: black;
  padding-left: 10px;
  font-weight: bold;
}

.link-box a:hover {
  color: #D31900;
  text-decoration: none;
}

.link-box a:active {
  color: black;
  padding-left: 10px;
  font-weight: bold;
}


#main-menu a:link,
#main-menu a:visited {
  color: red;
  text-transform: uppercase;
}

#main-menu a:hover {
  color: #FF6600;
}

#main-menu a:active {
  color: red;
  text-transform: uppercase;
}