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

Question

我在使用 a:visited（或者另一个可能？）伪类时遇到问题。我想让 links 在不同的元素中显示为不同的颜色（.link-box 中的黑色和 #main-menu 中的红色，无论它们是否被访问过），它们首先做，但是一旦它们是 "visited" links，它们都是相同的颜色（红色）。

知道我在这里做错了什么吗？

.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: pseudo-classes 的顺序很重要。

要记住 a: pseudo-classes 样式的常规助记符是：

爱恨

即。 Link、已访问、悬停、活跃

Re-order 你的样式表，像这样：

.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;
}

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

Trouble with a:visited pseudoclass... Links all showing as the same color after they are "visited" despite having different colors in css

css

hyperlink

pseudo-class