无法弄清楚为什么“已访问样式”不适用于链接

【问题标题】：Can't figure out why 'visited style' is not applying to link无法弄清楚为什么“已访问样式”不适用于链接
【发布时间】：2021-09-18 06:17:00
【问题描述】：

有一个带有“about”类的链接“a”项目，我正在尝试创建一种访问过的紫色样式。但由于某种原因，它不是“已访问”样式的样式。谢谢！

**html**

<header>
  <a href="about.html" class="about">ABOUT</a>
</header>

**css**

 a {  
  font-family: Gothic A1;
  font-size: 18px;
  text-decoration: none;
  color: #000000;
}

about a:visited {
 color: purple;
}
 

**hover animation**

a.about {
  position: relative;
}

a.about:before {
  content: '';
  position: absolute;
  width: 0;
  height: 1px;
  bottom: -2px;
  left: 0px;
  background: black;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}

a.about:hover:before {
 visibility: visible;
 width: 100%;
}

【问题讨论】：

标签： html css hyperlink

【解决方案1】：

应该是a.about:visited，而不是about a:visited。

about a 查找作为about 元素子元素的所有锚标记。 a.about 查找所有具有 about 类的锚标记。

 a {  
  font-family: Gothic A1;
  font-size: 18px;
  text-decoration: none;
  color: #000000;
}

a.about:visited {
 color: purple;
}
 

a.about {
  position: relative;
}

a.about:before {
  content: '';
  position: absolute;
  width: 0;
  height: 1px;
  bottom: -2px;
  left: 0px;
  background: black;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}

a.about:hover:before {
 visibility: visible;
 width: 100%;
}

<header>
  <a href="about.html" class="about">ABOUT</a>
</header>

【讨论】：

嗨！由于某种原因也不起作用（可能是由于悬停过渡动画 - 它就像一个移动的下划线）？我可能只是发布整个投资组合。感谢您的帮助。
@Hannah 你确定href 属性中的url 存在吗？它对我有用。