css - :visited pseudoclass. 的问题 .. 尽管在 css 中有不同的颜色，但链接在 "visited"之后都显示为相同的颜色

Question

我在使用 a:visited(或另一个可能？)伪类时遇到问题。我想让链接在不同的元素中显示为不同的颜色(.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;
}